讲解得非常好的一篇文章:
css3中的变形(transform)、过渡(transtion)、动画(animation)
transition
CSS中的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。
transition这个过程往往是从状态a切换到状态b,所以往往需要类似鼠标移入、点击等事件来触发状态的切换,从而触发transition。
transition: property || duration || time-function || delay
- property: 不是所有的CSS property都可以实现transition效果。
- duration: 单位可以是s也可以是ms。
- timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier
- cubic-bezier(x1,y1,x2,y2),取值都要在[0,1]之间;
- delay: 决定改变元素属性值后多长时间开始执行transition效果。
一个栗子:
<style>
div{
margin: 100px;
text-align: center;
width:100px;
height:100px;
background: #00f;
-webkit-transition: all 1s ease .1s;
-moz-transition: all 1s ease .1s;
-o-transition: all 1s ease .1s;
transition: all 1s ease .1s;
}
div:hover{
background: #f00;
transform: translateX(100px) rotate(45deg);
}
</style>
结果:
transition.gif可以看到颜色过渡和transform过渡是同时进行和完成的,如果想要错开多个过渡,可以利用transition的delay属性。
animation
transition可以看成是两个状态之间的切换,但是对于animation来说,中间会有很多个状态,于是我们引入“keyframes”关键帧,语法如下:
@keyframes "name"{
from{
//css rules
}
percentage{
//css rules
}
to{
//css rules
}
}
然后我们在要应用动画的元素的CSS style中定义animation的几个property:
- animation-name:keyframes定义的name,
- animation-duration,
- animation-timing-function:与transition的六个选项一致
- animation-delay,
- animation-iteration-count:动画重复次数
- animation-direction: normal | alternative
- animation-play-state: running | paused
在动画结束之后,元素的CSS style会回到默认样式,动画中定义的CSS样式都会被清除。
一个栗子
<style>
@keyframes move {
from{
margin-left: 100px;
background-color:pink;
}
20% {
margin-left: 150px;
background: red;
}
40% {
margin-left: 200px;
background-color:purple;
}
60% {
margin-left: 150px;
background-color: red;
}
to {
margin-left:100px;
background-color: pink;
}
}
div{
width: 100px;
height: 100px;
margin-left: 100px;
text-align: center;
background:pink;
animation: move 5s linear;
}
</style>
结果:
animation.gif嵌套使用animation
嵌套使用animation可以解决两个问题:
- 公用动画的抽取
- 避免动画的覆盖冲突
网友评论