让一个动画一直执行的属性是_深入理解CSS3动画：animation、transform、transition

本文首发自个人自有博客：【FaxMiao个人博客】，一个关注Web前端开发技术、关注用户体验、记录前端点滴，坚持更多原创，为大家提供高质量技术博文！

前言

在CSS3之前，动画主要都是以JavaScript或者Gif图片来实现，但是实现效果并不是很理想或者制作起来很麻烦，自有了CSS3之后很多动画几句代码即可实现，方便，快速，性能更好。

目录

• animation
• transform
• transition

一、animation

我们通过一个简单的例子来理解：延迟1秒执行，从左0往右100px无限循环来回移动；

div { 
    width: 80px;
    height: 80px; 
    background: #f30; 
    position: relative; 
    animation-name: test; 
    animation-duration: 3s; 
    animation-timing-function: linear; 
    animation-delay: 1s; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
    /*      
    简写属性     
    animation: test 1s linear 1s infinite alternate;     
    */ 
} 
@keyframes test {
    0% { left: 0;} 
    100% { left: 100px;} 
} 

【在线预览】

怎么样，是不是觉得so easy？对，就是这么简单！下面来详细讲解下这个代码：

语法：

@keyframes test { 
    0% { left: 0;} 
    100% { left: 100px;} 
} 
keyframes name：动画名称
from：起始，等同0%
to：结束，等同100%

当然也可以设置多个阶段，会有不同的效果哟，下面让我们来围着四周跑一圈：

@keyframes test { 
    0% { left: 0; top: 0;} 
    25% { left: 0; top: 50px;} 
    50% { left: 50px; top: 50px;} 
    75% { left: 50px; top: 0;} 
    100% { left: 0; top: 0;} 
}