文章目录

一、基本用法
- 1.关键帧@keyframes
- 2.示例
二、常见错误及解决方案
- （1）@keyframes 不能实现突变的状态变化
- - display替代方案
  - - 1.占据空间：visiblity
    - 2.不想占据空间：绝对定位+visiblity
    - 3.消失前占据空间但是消失后不占据空间：timeout和visiblity
- （2）@keyframes会增添/覆盖属性

一、基本用法

CSS3 动画
动画：指定一组或多组成套的动作，按照指定时间，指定的方式自动完成。
h5中动画的运用效率要高于使用js来体现动画效果，因为动画是渲染式的。

1.关键帧@keyframes

@keyframes 通过在动画序列中定义关键帧的样式，来控制CSS动画序列中的步骤。

使用 @keyframes 可以创建动画。
在动画过程中，您可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字“from”和“to”，等价于0％到100％
0％是开头动画，100％是当动画完成。

如

 @keyframes mycolor {0% { background-color: red; }30% { background-color: darkblue; }50% { background-color: yellow; }70% { background-color: darkblue; }100% { background-color: red; }}

1) animation-name：动画名称 指定了一个 @keyframes 动画，指定要使用哪一个关键帧。
2) animation-duration：动画持续时间 定义动画完成一个周期需要多少秒或毫秒。
3) animation-timing-function：动画的运动方式 指定动画将如何完成一个周期

  ease;默认ease-in;  ease-out;ease-in-out;linear;steps(数值, 定位) 定位：start/end 默认end指逐步运动

4) animation-delay：动画的延迟时间 动画什么时候开始。
5) animation-iteration-count：动画循环次数 动画应该播放多少次，默认1
其值为：n（一个数字，指定播放多少次）、infinite（指定播放无限次）、

6)animation-fill-mode：结束状态 设置动画结束时盒子的状态

  forwards 保持动画结束后的状态backwards 动画结束后回到最初的状态

7) animation-direction：动画的执行顺序 动画是否应该播放完后逆向交替循环（对设置了多次播放的动画有效）
其值为：normal（默认值，动画正常）、reverse 反向、alternate（动画交替循环逆向运动）

8) 简写方式
animation: 动画执行时间延迟时间执行关键帧名称运动方式运动次数结束状态动画执行顺序;

最简方式
animation: 动画执行时间执行关键帧名称; 执行时间和延迟时间顺序不可调整

2.示例

播放两次时长为5s的变色（红->黄->绿->h红）动画，结束。

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<style>
div { width: 200px;height: 200px;background: red;
}
@keyframes mycolor {0% { background-color: red; }30% { background-color: yellow; }60% { background-color: green; }100% { background-color: red; }
}
div:hover {animation-name: mycolor;animation-duration: 5s;animation-timing-function: linear;animation-iteration-count: 2;
}
</style>
</head>
<body><div></div>
</body>
</html>

二、常见错误及解决方案

（1）@keyframes 不能实现突变的状态变化

@keyframes 的原理是把样式的从一个状态，慢慢转变为另一个状态。

所以，如果不存在渐变的状态，是无法用@keyframes构成动画的，例如：

div {animation: appear 2s;
}
@keyframes appear {from { display:none; }to   { display:block;}
}

display:none;是将div消失并且不占空间，display:block;则是将div展现存在并占据空间。
但是 display:none;和display:block;是突变的 ，所以@keyframes无法实现。

同理其他种类的突变属性也无法拥有@keyframes的动画效果，@keyframes 只存在于渐变属性当中，例如各种width, height, opacity等属性值为数值的属性。

display替代方案

1.占据空间：visiblity

@keyframes appear {100% { opacity: 1;visibility: visible;}100% { opacity: 0;visibility: hidden;}
}

2.不想占据空间：绝对定位+visiblity

使用绝对定位使元素脱离文档流，搭配z-index控制层叠关系使它出现或者消失。

//自身css效果
.animate {position: absolute;top: 0;left: 0;transition: 1s;opacity: 0;visibility: hidden;z-index: 0;
}//出现时的效果
.cur {opacity: 1;visibility: visible;z-index: 10;
}

3.消失前占据空间但是消失后不占据空间：timeout和visiblity

（2）@keyframes会增添/覆盖属性

/*
* div 在2s内下移200px
*/
div {position:absolute;top:0px;animation: move 2s;
}
@keyframes move {from { top:20px; }to   { top:200px;}
}

此例中，div初始状态是top:0; 。
@keyframes首先用top:20px覆盖原属性（top:0;），然后再启动@keyframes功能。

结果：div突然瞬间下降20px，然后在2秒内下降至指定位置（top:200px;）

CSS3——@keyframe动画的基本用法，常见错误及解决方案相关推荐

gulp压缩js转义es6的常见错误及解决方案
gulp压缩js转义es6的常见错误及解决方案参考文章: (1)gulp压缩js转义es6的常见错误及解决方案 (2)https://www.cnblogs.com/uimeigui/p/11797 ...
Mac提示app损坏、Error，Mac电脑最常见错误的解决方案
这篇文章蓝同学给大家分享一下Mac电脑上最常见错误的解决方案. 以下仅给出部分错误提示截图,类似的错误提示还有磁盘映像损坏.xxx.app有啥啥问题.... ①提示xxx.app已损坏,让你移到废纸篓 ...
NDK编译php,Android NDK编译常见错误及解决方案
Android NDK编译常见错误及解决方案 Error 1:$ ndk-build/cygdrive/c/andy/abc/obj/local/armeabi-v7a/objs/abc//hello ...
大数据常见错误及解决方案
大数据常见错误及解决方案(转载) 1.用./bin/spark-shell启动spark时遇到异常:java.net.BindException: Can't assign requested add ...
Hadoop常见错误及解决方案、Permission denied: user=dr.who, access=WRITE, inode=“/“:summer:supergroup:drwxr-xr-x
文章目录 4.常见错误及解决方案 1)防火墙没关闭.或者没有启动YARN 7)不识别主机名称 8)DataNode和NameNode进程同时只能工作一个. 9)执行命令不生效,粘贴Word中命令时,遇 ...
MySQL数据库常见错误及解决方案
MySQL数据库常见错误及解决方案 1 MySQL无法重启问题解决Warning: World-writable config file '/etc/my.cnf' is ignored 原因今天帮 ...
Hadoop中的MapReduce框架原理、数据清洗（ETL）、MapReduce开发总结、常见错误及解决方案
文章目录 13.MapReduce框架原理 13.7 数据清洗(ETL) 13.7.1 需求 13.7.1.1 输入数据 13.7.1.2 期望输出数据 13.7.2 需求分析 13.7.3实现代码 ...
大数据技术之Hadoop（Hadoop企业优化常见错误及解决方案）
6.1 MapReduce 跑的慢的原因 6.2 MapReduce优化方法 MapReduce优化方法主要从六个方面考虑:数据输入.Map阶段.Reduce阶段.IO传输.数据倾斜问题和常用的调优参 ...
webapi发布常见错误及解决方案
webapi发布常见错误及解决方案参考文章: (1)webapi发布常见错误及解决方案 (2)https://www.cnblogs.com/zlp520/p/9436645.html 备忘一下.

CSS3——@keyframe动画的基本用法，常见错误及解决方案