深刻了解css3动画以及帧动画

时间 2019-11-29

标签深刻了解 css3 css 动画以及栏目 CSS 繁體版

原文原文链接

前言

初篇:css

从前端网转战掘金，之后当与各位大神看齐，一块儿学习进步，共同成长!
复制代码

css动画

Transform：对元素进行变形；html

Transition：对元素某个属性或多个属性的变化，进行控制（时间等），相似flash的补间动画。但只有两个关键贞。开始，结束。前端

Animation：对元素某个属性或多个属性的变化，进行控制（时间等），相似flash的补间动画。能够设置多个关键贞。css3

Transition与Animation:

transition须要触发一个事件 ,而animation在不须要触发任何事件的状况下也能够显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果。bash

这几个属性构成了 CSS3 丰富多彩的动画世界。css3动画

transition
transform
animation
复制代码

transition的局限

transition的优势在于简单易用，可是它有几个很大的局限。

（1）transition须要事件触发，因此无法在网页加载时自动发生。wordpress

（2）transition是一次性的，不能重复发生，除非一再触发。函数

（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。学习

（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。测试

animation-timing-function与transition-timing-function属性是同样的

重要的是贝塞尔曲线是由两个xy轴坐标拉的加速度曲线值 cubic-bezier.com

1)、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2)、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3)、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4)、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5)、ease-in-out：（加速而后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

6)、cubic-bezier：（该值容许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。全部值需在[0, 1]区域内，不然无效。
复制代码

关于css3动画其余更详细的介绍，参考其余大佬总结

借鉴大佬总结:

www.zhangxinxu.com/wordpress/2…

www.cnblogs.com/jingwhale/p…

帧动画

在应用 CSS3 渐变/动画时，有个控制时间的属性<timing-function> 。它的取值中除了经常使用到的三次贝塞尔曲线之外，还有个让人比较困惑的 steps() 函数。

steps() 第一个参数 number 为指定的间隔数（必须是正整数），即把动画分为 n 步阶段性展现，第二个参数默认为 end，设置最后一步的状态，start 为结束时的状态，end 为开始时的状态。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>spirit动画</title>
        <link rel="stylesheet" href="">
        <style>
        .bird{background: url(https://cdn.files.qdfuns.com/note/content/picture/201905/28/145522gd9yxe94l5px8222.jpg) -100% 0;
        width: 140px;
        height:85px;
        animation: bird 4s steps(1,end) 1 forwards ;
         }
        @keyframes bird{
           0% {
            background-position: 0 0;
            }
            10%{
                background-position: -100% 0;
            }
            20%{
                background-position: -200% 0;
            }
            30%{
                background-position: -300% 0;
            }
            50%{
                background-position: 0 100%;
            }
            60%{
                background-position: -100% 100%;
            }
            70%{
                background-position: -200% 100%;
            }
            80%{
                background-position: -300% 100%;
            }
            90%{
                background-position: 0 0;
            }
            100%{
                background-position: -100% 0;
            }

        }
        </style>
    </head>
    <body>
        <div class="bird"></div>
    </body>
</html>
复制代码

经测试，双排图片用steps(1)这样一帧去写，若是设计图是单排的话,如:

的话，能够用steps(10)去写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hi{
            width: 50px;
            height: 72px;
            background-image: url("https://cdn.files.qdfuns.com/note/content/picture/201905/28/150117p6sbit8yihupt8ej.png");
            /*深度理解
            *整个动画1s完成。
            *这里1s要移动500的像素，这1s要有十步走完，每步是平均下来是0.1s，
            *每步比上一步多走了72px的位置，这个走是瞬间走到的。
            *end表示每一步在接近0.1s再去走
            */
            animation: play 1s steps(10) infinite;
        }
        /*定义动画*/
        @keyframes play {
            from { background-position:    0px 0px; }
            to { background-position: -500px 0px; }
        }
    </style>
</head>
<body>
<img src="https://cdn.files.qdfuns.com/note/content/picture/201905/28/150117p6sbit8yihupt8ej.png" alt="此图片是500*72，主要是为了显示做用">
<div class="hi"></div>

</body>
</html>
复制代码