CSS 3 @keyframes 规则

css @keyframes* 可以用来创建创建动画

创建动画是通过逐步改变从一个 CSS 样式设定到另一个

在动画过程中，可以更改 CSS 样式的设定多次

指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同

0％是开头动画，100％是当动画完成

为了获得最佳的浏览器支持，应该始终定义为 0％和 100％的选择器

使用 animation 属性来控制动画的外观，还需要使用选择器绑定动画

语法

@keyframes *animationname* { *keyframes-selector* { *css-styles;}* }

值说明

值	说明
animationname	必需的。定义animation的名称
keyframes-selector	必需的。动画持续时间的百分比合法值：0-100% from (和0%相同) to (和100%相同) 可以用一个动画 keyframes-selectors
css-styles	必需的。一个或多个合法的CSS样式属性

浏览器支持

Chrome	IE	Firefox	Safari	Opera
43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-

范例

使一个div元素逐渐移动 200 像素

@keyframes mymove {
    from {top:0px;}
    to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
    from {top:0px;}
    to {top:200px;}
}

范例 2

许多关键帧选择器中添加一个动画

@keyframes mymove
    {
    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
    }

/* Safari and Chrome */
@-webkit-keyframes mymove {

    0%   {top:0px;}
    25%  {top:200px;}
    50%  {top:100px;}
    75%  {top:200px;}
    100% {top:0px;}
}

范例 3

在一个动画里改变多个 CSS 样式

@keyframes mymove {
    0%   {top:0px; background:red; width:100px;}
    100% {top:200px; background:yellow; width:300px;}
}


/* Safari and Chrome */
@-webkit-keyframes mymove 
{
    0%   {top:0px; background:red; width:100px;}
    100% {top:200px; background:yellow; width:300px;}
}

范例 4

多帧动画和多个样式属性

@keyframes mymove {

    0%   {top:0px; left:0px; background:red;}
    25%  {top:0px; left:100px; background:blue;}
    50%  {top:100px; left:100px; background:yellow;}
    75%  {top:100px; left:0px; background:green;}
    100% {top:0px; left:0px; background:red;}
}

/* Safari and Chrome */
@-webkit-keyframes mymove 
{
    0%   {top:0px; left:0px; background:red;}
    25%  {top:0px; left:100px; background:blue;}
    50%  {top:100px; left:100px; background:yellow;}
    75%  {top:100px; left:0px; background:green;}
    100% {top:0px; left:0px; background:red;}
}

链接: https://fly63.com/course/6_376