CSS3 animation 基础

rose 发布于2019-08-30 13:11 / 1360人阅读

摘要：最近项目有需求要做一个的页面，涉及到的使用。中间的动画过程由浏览器渲染引擎进行渲染。其中可以使用的时间段或者通过关键词和，等价于和。动画以低速开始，然后加快，在结束前变慢。动画延迟进入动画动画匀速播放持续，播放一次后将停止在最终的状态

最近项目有需求要做一个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);}
}

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最终的状态

云服务器 GPU云服务器 animated anime animate Animating

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115372.html

css3 动画（四）animation.css 源码分析

摘要：前言上一篇动画三简介中只是简单的介绍了一下的子属性，并没有真正的使用。在本篇中，通过阅读这个的动画库，来加深对的属性的理解。是一个具有非常多的动画效果的动画库。动画效果演示用法加上基础类以及动画类，就会有闪烁的动画效果。前言上一篇 css3 动画（三）animation 简介中只是简单的介绍了一下 animation 的子属性，并没有真正的使用。在本篇中，通过阅读 animate...

ThreeWords 2019-08-29 16:05 评论0 收藏0
基础知识：css3核心知识整理

摘要：前缀浏览器兼容根据了解，属性大部分支持，部分支持，少部分支持前缀苹果谷歌火狐浏览器世界之窗例如兼容转换过渡关键帧动画转换及以上支持，需添加前缀属性的方法使用缩放轴缩放倍，轴缩放倍，只有一个值时为缩放倍数倾 css3前缀（浏览器兼容）根据了解，css3属性大部分支持ie10，部分支持ie9，少部分支持ie8 // 前缀 // -webkit- Safari and Chrome（...

kycool 2019-08-30 15:55 评论0 收藏0
个人总结（css3新特性）

摘要：要实现这一点，必须规定两项内容指定要添加效果的属性指定效果的持续时间。当动画完成后，保持最后一个属性值在最后一个关键帧中定义。在所指定的一段时间内，在动画显示之前，应用开始属性值在第一个关键帧中定义。 1.前言 css3这个相信大家不陌生了，是个非常有趣，神奇的东西！有了css3，js都可以少写很多！我之前也写过关于css3的文章，也封装过css3的一些小动画。个人觉得css3不难，但...

马永翠 2019-08-29 13:12 评论0 收藏0