css 制作逐帧动画

返回：动画

用 CSS3 制作动画图，你需要了解两个 css 属性

@keyframes

因为它限定了 CSS 样式和动画逐步从目前的样式更改为新的样式的变化过程。浏览器兼容的时候需要在 keyframes 上加前缀，-webkit-, -ms- 或 -moz-

keyframes中有两个属性，from和to，from里面的内容定义动画开始的状态，to记录动画结束的状态。@keyframes后面紧跟的是动画的名字，这个可以自定义取名字，比如我取 gifname，页面某个标签元素使用这个动画时候，就需要用到这个名字

@keyframes gifname
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes gifname /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

@keyframes gifname
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes gifname /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

比如我在一个div元素上用到这个动画

div
{
    animation: gifname 5s;
    -webkit-animation: gifname 5s; /* Safari 与 Chrome */
}

animation

刚刚我们在div元素中看到的animation就是我们要认识的第二个属性。animation其实是一堆属性的简写。比如看下面一句代码：

animation:gifname 2s step-start 1s infinite alternate;

这一句其实可以写成

    /* 动画名称 */
    animation-name: gifname;
    /* 动画的持续时间 */
    animation-duration: 2s;
    /* 动画的过度类型 */
    animation-timing-function: step-start;
    /* 动画延迟时间，默认：0 */
    animation-delay: 1s;
    /* 动画循环次数，默认：1 */
    animation-iteration-count: infinite;
    /* 动画是否在下一周期逆向地播放 */
    animation-direction: alternate;

animation-timing-function

• 属性值 :默认是 "ease"
• linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
• ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
• ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
• ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
• ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
• cubic-bezier(n,n,n,n):在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
• step-start:马上跳到动画每一结束帧的状态

animation-direction

• normal：正常方向
• reverse：反方向运行
• alternate：动画先正常运行再反方向运行，并持续交替运行
• alternate-reverse：动画先反运行再正方向运行，并持续交替运行

animation-fill-mode:设置动画播放后的效果

• none:初始样式,不改变默认行为.(默认行为)
• forwards:动画播放结束后保持最后一个状态;
• backwards:结束后保持第一个状态;

animation-play-state :检索或设置对象动画的状态

• animation-play-state:running | paused;
• animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行

<div class="gifDiv">
    <main class="gifUl">
        <div>
            <img src="images/01.jpg" alt="1g金制纪念币背面" onerror="this.classList.add('error')">
        </div>
        <div>
            <img src="images/02.jpg" alt="5g金制纪念币背面" onerror="this.classList.add('error')">
        </div>
        <div>
            <img src="images/03.jpg" alt="5g金制纪念币背面" onerror="this.classList.add('error')">
        </div>
    </main>
</div>

.gifDiv {
    width: 100px;
    height: 100px;
    border: 1px solid tomato;
    overflow: hidden;
    margin-top: 20px;
}

.gifDiv .gifUl {
    float: left;
    width: 300px;
    height: 100px;
    /*border: 1px solid tomato;*/
    overflow: visible;
    position: relative;
    animation: htGif 2s step-start 1s infinite;
    /*margin: 0;*/
    /*padding: 0;*/
}

.gifUl div {
    float: left;
    width: 100px;
    height: 100px;
    /*border: 1px solid tomato;*/
    /*list-style: none;*/
    /*margin-right: 0;*/
}

.gifDiv div img {
    width: 100%;
    height: 100%;
}

@keyframes htGif {
    0% {left: 0; top: 0}
    33.3% {left: -100px; top: 0}
    66.7% {left: -200px; top: 0}
    100% {left: 0; top: 0}
}