06_css3中的Animation（动画）

Animation（动画）

人类具有视觉暂留的特性，人的眼睛在看到一幅画或一个物体后，在0.34秒内不会消失。

动画原理：
通过把人物的表情、动作、变化等分解后画成许多动作瞬间的画幅，利用视觉暂留的原理，在一幅画还没有消失前，播放下一幅画。就会给人造成一种流畅的视觉变化效果。

css3动画
使元素从一种样式逐渐变化为另一种样式的效果
animation属性是一个简写属性形式: （可以用来描述可动画的属性）

可动画属性的列表：
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

简写属性animation
animation：animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state在每个动画定义中，顺序很重要：
可以被解析为 <time>的第一个值被分配给animation-duration,
第二个分配给 animation-delay。

关键帧（@keyframes）

语法：
@keyframes animiationName{keyframes-selector{css-style;}
}animiationName:必写项，定义动画的名称
keyframes-selector：必写项，动画持续时间的百分比from：0%to：100%css-style：css声明

animation-name

指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列值:none特殊关键字，表示无关键帧。keyframename标识动画的字符串

animation-duration

指定一个动画周期的时长。默认值为0s，表示无动画。值:一个动画周期的时长，单位为秒(s)或者毫秒(ms)，**无单位值无效**。<br>注意：负值无效，浏览器会忽略该声明，但是一些早起的带前缀的声明会将负值当作0s

animation-timing-function

定义CSS动画在每一动画周期中执行的节奏。 对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始，到关键帧结束。动画的默认效果：由慢变快再变慢值：
linear:线性过渡，等同于贝塞尔曲线（0,0,1,1）
ease:平滑过渡，等同于贝塞尔曲线（0.25,0.1,0.25,1.0）
ease-in:由慢到快，等同于贝塞尔曲线（0.42,0,1,1）
ease-out:由快到慢，等同于贝塞尔曲线（0,0,0.58,1）
ease-in-out:由慢到快再到慢，等同于贝塞尔曲线（0.42,0,0.58,1）
cubic-bezier(1,1,2,3)steps(n,[start|end]) 传入一到两个参数，第一个参数意思是把动画分成 n 等分，然后动画就会平均地运行。第二个参数 start 表示从动画的开头开始运行，相反，end 就表示从动画的结尾开始运行，默认值为 end。

animation-delay

定义动画开始前等待的时间,以秒或毫秒计(属于动画外的范畴)值:<time>从动画样式应用到元素上到元素开始执行动画的时间差。该值可用单位为秒(s)和毫秒(m   s)。**如果未设置单位，定义无效**

animation-iteration-count

定义动画执行的次数（属于动画内的范畴）值:infinite无限循环播放动画.<number>动画播放的次数 不可为负值.

animation-direction

定义动画执行的方向值:
normal每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。
alternate动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭       代
reverse反向运行动画，每周期结束动画由尾到头运行。
alternate-reverse反向交替， 反向开始交替

animation-fill-mode

属于动画外的范畴，定义动画在动画外的状态
animation-fill-mode: none || backwards || forwards || both管理所有动画外的状态！什么是动画外的状态from之前animation-delayto之后值:none        : 动画外的状态保持在动画之前的位置backwards ：from之前的状态与from的状态保持一致forwards   ：to之后的状态与to的状态保持一致both       ：动画外的状态与from和to的状态保持一致

animation-play-state

定义了动画执行的运行和暂停值running当前动画正在运行。paused当前动画以被停止。

06_css3中的Animation（动画）相关推荐

android中设置Animation 动画效果
在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...
在GridView的行绑定中应用Animation动画效果
今天做一个功能需要实现绑定GridView的行Button点击就实现Animation的动画效果,终于被我解决了!主要代码如下: GridVIew行绑定: <ItemTemplate> ...
html+css中的animation 动画(二)孙悟空巡山
打开页面孙悟空在原地匀速运动,背景利用视觉差匀速的向后运动附代码 <!DOCTYPE html> <html lang="en"> <head> ...
web 移动端 ios 浏览器中 animation 动画异常
关键字:animation,ios,移动端,异常解决问题的办法:页面dom加载完毕时延时给dom加上动画类名.即在vue的mounted钩子中用定时器延时100ms左右给需要动画的dom加上类名. ...
android编程xml动画,Android中xml设置Animation动画效果详解
在Android中,Animation动画效果的实现可以通过两种方式进行实现,一种是tweened animation渐变动画,另一种是frame by frame animation画面转换动画. ...
HTML中对于 animation（动画）属性的使用方法
本人最近开始写爱奇艺项目时,项目要求我对一个下拉列表写一个动画弹出效果,由于不经常写前端,所以我又重新去学习了CSS3中的 animation属性,我相信肯定有很多人在后面学习前端的时候也会用到这个属 ...
ae制h5文字动画_H5案例分享：CSS3 Animation动画
CSS3 Animation动画一.@keyframes CSS3中的Animation动画主要的组件是@keyframes,@keyframes这个规则是用来创建动画的.将@keyframes当作 ...
【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )
文章目录一.创建动画控制器二.创建动画三.设置值监听器四.设置状态监听器五.布局中使用动画值六.动画运行七.完整代码示例八.相关资源 Flutter 动画基本流程 : ① 创建动画控制 ...
css动画定义,CSS3中Animation动画的定义和调用
现在经常会看到一些门户网站的专题使用到CSS3的动画,咋也不能落伍,在此这梳理下动画知识吧,便于后面用到.接下来介绍下Animation动画的定义和调用,在介绍Animation之前需要了解下Keyf ...