transition 过渡属性
transition 属性是一个简写属性,用于设置四个过渡属性:
注意:CSS3的transition支持visibility属性,但是并不支持display,由于transition可以延迟执行,因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。
1.transition-property
指定CSS属性的name,(如:width、color、transform 、border-radius),transition过渡效果
2.transition-duration
transition效果需要指定多少秒或毫秒才能完成
3.transition-timing-function
指定切换效果的速度
4.transition-delay
延迟秒或毫秒数切换效果才开始
怎么设置多个过渡属性name
多个属性逗号隔开
transition: transform 2s ease, border-radius 3s ease-out;
animation属性
animation属性是一个简写属性,细分有8个属性,前四个属性和过渡属性一样
使用例子
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove;
animation-duration:5s;
/* Safari and Chrome */
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}