css3动画由浅入深总结

Posted 2021-04-09 web前端开发

一：过渡动画---Transitions

一：过渡动画---Transitions

含义：在css3中，Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能。

Transitions属性的使用方法如下所示：

transition: property | duration  | timing-function | delay

transition-property: 表示对那个属性进行平滑过渡。

transition-duration: 表示在多长时间内完成属性值的平滑过渡。

transition-timing-function 表示通过什么方法来进行平滑过渡。

transition-delay: 定义过渡动画延迟的时间。

默认值是 all  0  ease  0

浏览器支持程度：IE10，firefox4+，opera10+，safari3+及chrome8+

下面是transitions过渡功能的demo如下：

html代码如下：

<div class="transitions">transitions过渡功能</div>

CSS代码如下：

.transitions {
    -webkit-transition: background-color 1s ease-out;
    -moz-transition: background-color 1s ease-out;
    -o-transition: background-color 1s ease-out;
}.transitions:hover {
    background-color: #00ffff;
}

效果如下：

transitions过渡功能

如果想要过渡多个属性，可以使用逗号分割，如下代码：

div { -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;}

2. 我们可以使用Transitions功能同时平滑过渡多个属性值。

如下HTML代码：

<h2>transitions平滑过渡多个属性值</h2><div class="transitions2">transitions平滑过渡多个属性值</div>

css代码如下：

.transitions2 {
        background-color:#ffff00;
        color:#000000;
        width:300px;
        -webkit-transition: background-color 1s linear, color 1s linear, width 1s linear;
        -moz-transition: background-color 1s linear, color 1s linear, width 1s linear;
        -o-transition: background-color 1s linear, color 1s linear, width 1s linear;
}.transitions2:hover {
        background-color: #003366;
        color: #ffffff;
        width:400px;
}

效果如下：

transitions平滑过渡多个属性值

transitions平滑过渡多个属性值

注意：transition-timing-function 表示通过什么方法来进行平滑过渡。它值有如下：

有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

至于linear 线性我们很好理解，可以理解为匀速运动，至于cubic-bezier贝塞尔曲线目前用不到，可以忽略不计，我们现在来理解下 ease, ease-in, easy-out 和 ease-in-out 等属性值的含义；

ease: 先快后逐渐变慢；

ease-in: 先慢后快

easy-out: 先快后慢

easy-in-out: 先慢后快再慢

理解上面几个属性值，如下demo：

HTML代码如下:

<div id="transBox" class="trans_box">
    <div class="trans_list ease">ease</div>
    <div class="trans_list ease_in">ease-in</div>
    <div class="trans_list ease_out">ease-out</div>
    <div class="trans_list ease_in_out">ease-in-out</div>
    <div class="trans_list linear">linear</div></div>

CSS代码如下：

.trans_box {
    background-color: #f0f3f9;
　　width:100%
}.trans_list {
    width: 30%;
    height: 50px;
    margin:10px 0;
    background-color:blue;
    color:#fff;
    text-align:center;
}.ease {
    -webkit-transition: all 4s ease;
    -moz-transition: all 4s ease;
    -o-transition: all 4s ease;
    transition: all 4s ease;
}.ease_in {
    -webkit-transition: all 4s ease-in;
    -moz-transition: all 4s ease-in;
    -o-transition: all 4s ease-in;
    transition: all 4s ease-in;
}.ease_out {
    -webkit-transition: all 4s ease-out;
    -moz-transition: all 4s ease-out;
    -o-transition: all 4s ease-out;
    transition: all 4s ease-out;
}.ease_in_out {
    -webkit-transition: all 4s ease-in-out;
    -moz-transition: all 4s ease-in-out;
    -o-transition: all 4s ease-in-out;
    transition: all 4s ease-in-out;
}.linear {
    -webkit-transition: all 4s linear;
    -moz-transition: all 4s linear;
    -o-transition: all 4s linear;
    transition: all 4s linear;
}.trans_box:hover .trans_list{
    margin-left:90%;
    background-color:#beceeb;
    color:#333;
    -webkit-border-radius:25px;
    -moz-border-radius:25px;
    -o-border-radius:25px;
    border-radius:25px;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

效果如下：

ease

ease-in

ease-out

ease-in-out

linear

二：Animations功能

Animations功能与Transitions功能相同，都是通过改变元素的属性值来实现动画效果的。它们的区别在于：使用Transitions功能是只能通过指定属性的开始值与结束值。然后在这两个属性值之间进行平滑过渡的方式来实现动画效果，因此不能实现复杂的动画效果；而Animations则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

语法：animations: name duration timing-function iteration-count;

name: 关键帧集合名（通过此名创建关键帧的集合）

duration: 表示在多长时间内完成属性值的平滑过渡

timing-function: 表示通过什么方法来进行平滑过渡

iteration-count: 迭代循环次数，可设置为具体数值，或者设置为infinite进行无限循环，默认为1.

用法：@-webkit-keyframes 关键帧的集合名 {创建关键帧的代码}

如下面的代码：

@-webkit-keyframes mycolor {
   0% {background-color:red;}
   40% {background-color:darkblue;}
   70% {background-color: yellow;}
   100% {background-color:red;}}
.animate:hover {
   -webkit-animation-name: mycolor;
   -webkit-animation-duration: 5s;
   -webkit-animation-timing-function: