css3中的动画处理

Posted 2020-08-07 杜Amy

动画--过渡属性 

 div {
        width: 200px;
        height: 200px;
        background: red;
        margin: 20px auto;
       /* -webkit-transition-property: -webkit-border-radius;
        transition-property: border-radius;*/
        -webkit-transition-property: width;  /*过渡*/
        transition-property: width;
        -webkit-transition-duration:.5s;  /*完成过渡所需的时间*/
        transition-duration:.5s;
        -webkit-transition-timing-function: ease-in;  /*慢速开始的过渡*/
        transition-timing-function: ease-in;
        -webkit-transition-delay: .18s;   /*开始出现的延迟时间*/
        transition-delay:.18s;
    }
    div:hover {  transition: all .28s ease-in .1s;  /*从正方形的效果，慢慢过渡到圆角*/
        width: 400px;
    }

 /*
    transition-property:指定过渡或动态模拟的CSS属性
    transition-duration:指定完成过渡所需的时间，设置过渡动画的持续时间
    transition-timing-function:指定过渡函数
    transition-delay:指定开始出现的延迟时间，指定一个动画开始执行的时间


    /*transition-timing-function包括以下几种函数：
    ease        默认值，速度由快到慢，逐渐变慢
    linear      恒速
    ease-in     渐加效果，加速速度越来越快
    ease-out    渐隐效果，减速速度越来越慢
    ease-in-out 先加速再减速*/

 

Keyframes被称为关键帧 以“@keyframes”开头

@keyframes changecolor{ 声明的动画可自己定义
    0%{
        background: red;
    }
    40% {

        background:orange;
    100%{
        background: green;
    }
    }

 

 div{animation-iteration-count:infinite;  /*无限循环*/
        animation-iteration-count:5; /*用来定义动画的播放次数*/
        animation-name:move;   /*为 @keyframes 动画规定一个名称：*/
        animation-direction:alternate;  /*设置动画的播放方向*/
        animation-play-state:paused; /*页面加载时动画不播放*/

    }

 

设置动画播放方向  animation-direction

其主要有两个值：normal、alternate

1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放；
2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

 1 <div><span></span></div>
 2 
 3                          div {
 4                              width: 200px;
 5                              height: 200px;
 6                              border: 1px solid red;
 7                              margin: 20px auto;
 8                          }
 9     span {
10         display: inline-block;
11         width: 20px;
12         height: 20px;
13         background: orange;
14         transform: translateY(90px);
15         animation-name: move;
16         animation-duration: 10s;
17         animation-timing-function: ease-in;
18         animation-delay: .2s;
19         animation-iteration-count:infinite;
20         animation-direction:alternate;
21     }
22 
23     @keyframes move {
24         0%{
25             transform: translateY(90px);
26         }
27         15%{
28             transform: translate(90px,90px);
29         }
30         30%{
31             transform: translate(180px,90px);
32         }
33         45%{
34             transform: translate(90px,90px);
35         }
36         60%{
37             transform: translate(90px,0);
38         }
39         75%{
40             transform: translate(90px,90px);
41         }
42         90%{
43             transform: translate(90px,180px);
44         }
45         100%{
46             transform: translate(90px,90px);
47         }
48     }