动画是进行形状更改和使用元素创建动作的过程.

@keyframes

关键帧将控制CSS3中的中间动画步骤.

左侧动画和减号的关键帧示例;

@keyframes animation {   from {background-color: pink;}   to {background-color: green;}}div {   width: 100px;   height: 100px;   background-color: red;   animation-name: animation;   animation-duration: 5s;}

以上示例显示了具有关键帧语法的动画的高度，宽度，颜色，名称和持续时间.

向左移动动画

                  h1 {            -moz-animation-duration: 3s;            -webkit-animation-duration: 3s;            -moz-animation-name: slidein;            -webkit-animation-name: slidein;         }         @-moz-keyframes slidein {            from {               margin-left:100%;               width:300%            }            to {               margin-left:0%;               width:100%;            }         }         @-webkit-keyframes slidein {            from {               margin-left:100%;               width:300%            }            to {               margin-left:0%;               width:100%;            }         }                  
Tutorials Point
      
this is an example of moving left animation .
      Reload page         

Moving left animation with keyframes

                  h1 {            -moz-animation-duration: 3s;            -webkit-animation-duration: 3s;            -moz-animation-name: slidein;            -webkit-animation-name: slidein;         }         @-moz-keyframes slidein {            from {               margin-left:100%;               width:300%            }            75% {               font-size:300%;               margin-left:25%;               width:150%;            }            to {               margin-left:0%;               width:100%;            }         }         @-webkit-keyframes slidein {            from {               margin-left:100%;               width:300%            }            75% {               font-size:300%;               margin-left:25%;               width:150%;            }            to {               margin-left:0%;               width:100%;            }         }                  
Tutorials Point
            
This is an example of animation left with an extra keyframe          to make text changes.
      Reload page