animation动画

柔情只为你懂 2023-01-07 02:30 280阅读 0赞

一、集成方法：分两步：

1、首先使用animation 注册动画，如：

.mydiv{
       -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
    }

2、使用@keyframes规则实现动画，如：

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

注：以上-webkit-前缀表示支持Safari 和 Chrome浏览器，其他的还有：-moz- 用于支持/\* Firefox \*/，-o-用于支持 /\* Opera \*/。不带前缀的写法支持Internet Explorer 10、Firefox 以及 Opera：

.mydiv{
       animation:mymove 5s infinite; 
    }
    
    @keyframes mymove
    {
    from {background: red;}
    to {background: yellow;}
    }

所以如果要兼容多种浏览器的话，需要注册多次并实现多次：因为不带前缀的写法已支持除Safari 和 Chrome以外的浏览器，所以再注册和实现下-webkit-前缀的即可：

.mydiv{
     animation:mymove 5s infinite;
     -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
    }
    
    @keyframes mymove
    {
     from {background: red;}
     to {background: yellow;}
    }
    
    @-webkit-keyframes mymove /* Safari 和 Chrome */
    {
     from {background: red;}
     to {background: yellow;}
    }

二、animation 属性：animation 是一个简写属性，用于设置六个动画属性：animation: *name* *duration* *timing-function* *delay* *iteration-count* *direction*;

<table> 
 <tbody> 
  <tr> 
   <td><em><a href="https://www.w3school.com.cn/cssref/pr_animation-name.asp" rel="nofollow">animation-name</a></em></td> 
   <td>规定需要绑定到选择器的 keyframe 名称。。</td> 
  </tr> 
  <tr> 
   <td><em><a href="https://www.w3school.com.cn/cssref/pr_animation-duration.asp" rel="nofollow">animation-duration</a></em></td> 
   <td>规定完成动画所花费的时间，以秒或毫秒计。</td> 
  </tr> 
  <tr> 
   <td><em><a href="https://www.w3school.com.cn/cssref/pr_animation-timing-function.asp" rel="nofollow">animation-timing-function</a></em></td> 
   <td>规定动画的速度曲线。</td> 
  </tr> 
  <tr> 
   <td><em><a href="https://www.w3school.com.cn/cssref/pr_animation-delay.asp" rel="nofollow">animation-delay</a></em></td> 
   <td>规定在动画开始之前的延迟。</td> 
  </tr> 
  <tr> 
   <td><em><a href="https://www.w3school.com.cn/cssref/pr_animation-iteration-count.asp" rel="nofollow">animation-iteration-count</a></em></td> 
   <td>规定动画应该播放的次数。</td> 
  </tr> 
  <tr> 
   <td><em><a href="https://www.w3school.com.cn/cssref/pr_animation-direction.asp" rel="nofollow">animation-direction</a></em></td> 
   <td>规定是否应该轮流反向播放动画。</td> 
  </tr> 
 </tbody> 
</table>

如

.mydiv{
       -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
    }

等价于

.mydiv{
     -webkit-animation-name:mymove;
     -webkit-animation-duration:5s;
     -webkit-animation-timing-function:infinite;
    }

三、@keyframes规则：

四、常见动画种类：

1、transform 移动&缩放动画：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。*用法：object*.style.transform="rotate(7deg)"

1）旋转： rotate(30deg);（顺时针旋转30°）

2）2D移动：translate(*x*,*y*)（右移到x，下移到y）

3）3D移动：translate3d(*x*,*y*,*z*)

4）横向移动：translateX(*x*)（横向移动到x）

5）竖向移动：translateY(*y*)（竖向移动到y）

6）缩放：scale(*x*,*y*)（以元素中心为中心，横向放大x倍，竖向放大y倍）

7）横向缩放：scaleX(2)（横向放大2倍）

8）竖向缩放：scaleY(*5*)（竖向放大5倍）

如：

//从左向右平移
    @-webkit-keyframes right-to-left {
            100% {
              transform: translatex(-1000px);
            }
        }
    
    
    //顺时针旋转
     @-webkit-keyframes circle {
                0% {
                  transform: rotate(0deg);
                }
                100% {
                  transform: rotate(-360deg);
                }
        }

2、淡入淡出动画：opacity，值在0-1之间。如：

//渐显动画
    @-webkit-keyframes show {
          0% {
            opacity: 0;
          }
          100% {
            opacity: 1;
          }
        }

五、其他问题：

1、动画固定问题：animation-fill-mode属性，有以下值：

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>none</td> 
   <td>不改变默认行为。</td> 
  </tr> 
  <tr> 
   <td>forwards</td> 
   <td>当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。</td> 
  </tr> 
  <tr> 
   <td>backwards</td> 
   <td>在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。</td> 
  </tr> 
  <tr> 
   <td>both</td> 
   <td>向前和向后填充模式都被应用。</td> 
  </tr> 
 </tbody> 
</table>

如

.model-out {
            -webkit-animation: left-to-right 5s infinite; /* Safari 和 Chrome */
            animation-fill-mode: forwards;//固定在最后一帧动画
          }

2、动画衔接问题：第二个动画从第一个动画结束的地方播放，即将第二个的延迟时间（animation-delay） 设置成第一个的持续时间( animation-duration )