CSS3 @keyframes 规则以及animation介绍和各种动画样式说明

一个好网站：http://www.jqhtml.com/

如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

示例：

@keyframes myfirst{from {background: red;}to {background: yellow;}}
@-moz-keyframes myfirst{from {background: red;}to {background: yellow;}}
@-webkit-keyframes myfirst{ from {background: red;} to {background: yellow;} }
@-o-keyframes myfirst { from {background: red;} to {background: yellow;} }

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：1.规定动画的名称 2.规定动画的时长

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。

@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。
animation-fill-mode 规定对象动画时间之外的状态。

animation-timing-function的取值：

linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
steps(n,s)动画一帧帧改变，中间没有渐变的效果。

steps 函数指定了一个阶跃函数
第一个参数指定了时间函数中的间隔数量（必须是正整数）

第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；

step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。

step(n,s)的第一个参数，是指在两个关键帧之间变化的次数。

step(n,s)的第二个参数：

step-start在变化过程中，都是以下一帧的显示效果来填充间隔动画，所以0% 到 50% 直接就显示了黄色yellow

step-end与上面相反，都是以上一帧的显示效果来填充间隔动画，所以0% 到 50% 直接就显示了红色red

steps函数，它可以传入两个参数，第一个是一个大于0的整数，他是将间隔动画等分成指定数目的小间隔动画，然后根据第二个参数来决定显示效果。
第二个参数设置后其实和step-start，step-end同义，在分成的小间隔动画中判断显示效果。可以看出：steps(1, start) 等于step-start，steps(1,end)等于step-end
最核心的一点就是：timing-function 作用于每两个关键帧之间，而不是整个动画

左右摇动效果样式：

@keyframes leftandright {
  0% {
    transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1)  rotate(0deg);
    opacity: 1;
  }
  4% {
    transform: scale(.95)  rotate(0deg);
    -webkit-transform: scale(.95)  rotate(0deg);
    opacity: .85;
  }
  8% {
    transform: scale(.96) rotate(8deg);
    -webkit-transform: scale(.96) rotate(8deg);
    opacity: .85;
  }
  12% {
    transform: scale(.97) rotate(-6deg);
    -webkit-transform: scale(.97) rotate(-6deg);
    opacity: .85;
  }
  16% {
    transform: scale(.98) rotate(4deg);
    -webkit-transform: scale(.98) rotate(4deg);
    opacity: .85;
  }
  20% {
    transform: scale(.99) rotate(-2deg);
    -webkit-transform: scale(.99) rotate(-2deg);
    opacity: .85;
  }
  22% {
    transform: scale(1) rotate(0deg);
    -webkit-transform: scale(1) rotate(0deg);
    opacity: .85;
  }
  100% {
    opacity: 1;
  }
}

.fun {
  position: absolute;
}
.fun1 {
  right: 50px;
  top: 100px;
  transform: scaleY(1.3);
  opacity: 0;
  transform-origin: 50% 0%;
  z-index:999;
}
.fun1.active {
  -webkit-animation: fun_in1 .6s .5s linear both;
  animation: fun_in1 .6s .5s linear both;
}
.listen-btn img{
  -webkit-animation: leftandright 3.8s 2s infinite;
  animation: leftandright 3.8s 2s infinite;
}

 <a href="#" class="listen-btn"><img src="/img/ts0.png" alt="" /></a>

@keyframes说明：http://www.w3school.com.cn/cssref/pr_keyframes.asp

animation说明：http://www.w3school.com.cn/cssref/pr_animation.asp

transform说明：http://www.w3school.com.cn/cssref/pr_transform.asp

transition说明：http://www.w3school.com.cn/cssref/pr_transition.asp

秒客网

CSS3 @keyframes 规则以及animation介绍和各种动画样式说明

相关文章