CSS3 animation 基础

2024年2月19日 171次阅读 来源: caozheng550

最近项目有需求要做一个H5的页面，涉及到CSS3 animation的使用。这里做了一个项目中的总结。

  • animation 基本用法
animation : [name] [keeping-time] [animate-function] [delay] [times] [iteration] [final]
  • 第一个参数：name (animation-name)

定义动画的名字，CSS3定义采用” 关键帧[keyframes] “来定义动画

@keyframes fadeOut{
    0% { opacity : 1}
    100% { opacity : 0}
}

对应不同的浏览器需要加前缀做兼容。

以上代码的意义：定义了一个动画名字叫fadeOut，0%代表动画初，100%代表动画末。中间的动画过程由浏览器渲染引擎进行渲染。其中可以使用的时间段0%~100%,或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。

  • 第二个参数：keeping-time (animation-duration)

整个动画持续的时间，必须带时间单位，s或者ms

  • 第三个参数：animate-function (animation-timing-function)

运动方式的贝塞尔曲线，基本值

linear       
// 动画从头到尾的速度是相同的。

ease        
// 默认。动画以低速开始，然后加快，在结束前变慢。 

ease-in      
// 动画以低速开始。

ease-out     
// 动画以低速结束。

ease-in-out  
// 动画以低速开始和结束。

cubic-bezier(n,n,n,n)
// 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
  • 第四个参数：delay (animation-delay)

动画延迟执行的时间，单位也是s或者ms。

  • 第五个参数：times (animation-iteration-count)：

动画循环执行的次数，无单位，infinite为无限循环。

  • 第六个参数：iteration (animation-direction)

如果动画循环，循环的方式是：alternate(偶数次向前播放，奇数次向后播放)、normal(每次都向前播放)。

  • 第七个参数：final (animation-fill-mode)：

动画的最后（达到100%）时的状态，取值有：backwards（回到初始状态）、forwards（停在最终状态）、none、both。

both详解：(根据animation-direction决定)
当设置方向为反方向的时候，根据动画执行的次数判断小球是否处于backwards还是forwards的状态，以上代码是执行偶数次，动画来回运动，最终回到初始状态极为backwards状态，当为奇数次时，则为结束状态forwards状态

.center{
    border: 1px solid #332;
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background: rgba(0,0,0,0.5);
    -webkit-animation:ani 1s ease-in 2 alternate both;
}
@-webkit-keyframes ani{
    0%{-webkit-transform:translateX(0);}
    50%{-webkit-transform:translateX(40px);}
    100%{-webkit-transform:translateX(100px);}
}

<div class="center"></div>
  • animation可以设置多组动画
.hr-3{
    -webkit-animation: zoomInUpHr 2s linear 19s 1 forwards, zoomOutUpHr 1s linear 25s 1 forwards;
}
// 1、动画延迟19s进入zoomInUpHr动画(动画匀速播放持续2s)，播放一次后将停止在zoomInUpHr最终的状态。2、动画延迟25s进入zoomOutUpHr动画(动画匀速播放持续2s)，播放一次后将停止在zoomOutUpHr最终的状态
    原文作者：caozheng550
    原文地址: https://segmentfault.com/a/1190000007662557
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞