关于animation和transition一点知识

时间 2020-02-14

标签关于 animation transition 一点 1点知识繁體版

原文原文链接

在使用CSS3动画时相信不少人都会接触过animation，transition以及transform属性。经过 CSS3，咱们可以建立动画，这能够在许多网页中取代动画图片、Flash 动画以及 JavaScript——CSS3是世界上最可爱的语言css

CSS3动画和JS动画的区别

JS 实现的是帧动画 CSS3 实现的是补间动画html

帧动画：使用定时器，每隔一段时间，更改当前的元素 补间动画： 过渡（加过渡只要状态发生改变产生动画）动画(多个节点来控制动画)性能会更好性能

transition

transition是一个简单的动画属性，能够看做是是animation的简化版本，一般拿来配合事件触发使用，简单易用动画

transition的属性值

描述	属性
transition-property	须要过渡的属性，也能够是all，不能用block，none等
transition-duration	指定从一个属性到另外一个属性过渡所要花费的时间。默认值为0，为0时，表示变化是瞬时的，看不到过渡效果
transiton-timing-function	就是过渡的动画类型。可用的类型有liner（匀速）、ease-in(减速)、ease-out（加速）ease-in-out（先加速再减速）、cubic-bezier：三次贝塞尔曲线，能够定制
transition-delay	指定检测到过渡行为以后延迟必定时间后才开始进行执行

transition特性

transition需用事件触发【好比加个hover伪类】，不能在网页加载时自动发生
一次性，不能重复发生，除非一再触发
只有两个状态：开始和结束状态
一条transition规则只能定义一个属性

<body>
    <div class="box"></div>
</body>
<style> .box { height: 100px; width: 100px; background-color: lightpink; transition: width 1s 0.5s ease-in-out; } .box:hover { width: 200px; } </style>
复制代码

效果以下spa

也能够在 hover 中写 transition: width 1s 0.5s ease-in-outssr

.box:hover {
    width: 200px;
    transition: width 1s 0.5s ease-in-out;
}
复制代码

其实写在hover上也是能够的，可是当我移出元素后，元素宽度立马恢复，而没有过渡！缘由很简单，你transistion只写在hover上，也就是说只有鼠标移上去的时候，该伪类才生效3d

animation

animation的属性值

属性	描述
animation-name	用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function	速度曲线，和transition-timing-function同样，可用的类型有liner（匀速）、ease-in(减速)、ease-out（加速）ease-in-out（先加速再减速）、cubic-bezier：三次贝塞尔曲线，能够定制
animation-delay	规定动画什么时候开始，默认是 0
animation-iteration-count	规定动画被播放的次数。默认是 1
animation-direction	normal 默认值，若是设置为normal时，动画每次循环都是向前（即按顺序）播放，alternate（轮流），动画播放在第偶数次向前播放，第奇数次向反方向播放（animation-iteration-count取值大于1时设置有效）
animation-play-state	running，能够经过该值将暂停的动画从新播放，这里的从新播放不是从元素动画的开始播放，而是从暂停的那个位置开始播放，paused，暂停播放
animation-fill-mode	默认状况下，动画结束后，元素的样式将回到起始状态，animation-fill-mode属性能够控制动画结束后元素的样式。主要具备四个属性值：none（默认，回到动画没开始时的状态。），forwards（动画结束后动画停留在结束状态），backwords（动画回到第一帧的状态），both（根据animation-direction轮流应用forwards和backwards规则）

<body>
    <div class="box"></div>
</body>
<style> .box { height: 200px; width: 200px; animation: 3s type forwards alternate infinite; animation-play-state: running; } .box:hover { animation-play-state: paused; } @keyframes type { from { background: yellowgreen } 50% { background: yellow } to { background: aquamarine } } </style>
复制代码

当鼠标移入的时候暂停，移出的时候继续变换颜色code

transform

首先要注意的是transform属性是静态属性，只要写进style里就会直接显示生效，不会出现动画过程经过使用transform属性，可以对元素进行移动（translate）、缩放（scale）、旋转（rotate）、翻转（skew），更多详细参数能够参考CSS3 transform 属性orm

总结

区别	transition	animation
是否能自动执行	不能，须要事件触发，好比hover	能
可否重复发生	不能，除非在一次触发	能
可否包含多个状态	不能，只有开始和结束状态	能，好比从0% 到100%，任意指定过渡状态
可否暂停	不能，一次性	能，好比hover事件触发暂停
可否定义速度曲线	能	能
可否定义某个属性值过渡	能	能

参考文章

CSS动画 animation与transition
CSS动画中的transition和animationcdn