transition
语法:transition: property duration timing-function delay;
- transition 简写属性,用于在一个属性中设置四个过渡属性
- property 规定用于过渡的CSS属性的名称 例如改变的是宽度 就写width
- duration 定义过渡效果花费的时间 默认是0
- timing-funcation 规定过渡效果的时间曲线,例如:ease, ease_in,ease_out.类似这种淡入淡出的效果,默认是ease.
- delay 规定过渡效果何时开始 默认是0
简单的过渡变大动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JOE</title>
<style type="text/css">
#test{
background: red;
width: 80px;
height: 80px;
transition: all 5s ease-in-out 0s;
margin-left: 10px;
}
#test:hover{
margin-left: 89%;
transform: scale(1.5);
}
</style>
</head>
<body>
<div id='test'></div>
</body>
</html>
animation
在CSS3中,除了使用transitions功能实现动画之外,还可已使用animation实现复杂的动画效果,创建animation动画,首先要了解@keyframs规则.
@keyframes规则是创建动画,@keyframs规则内指定给一个CSS样式和动画将逐步从目前的样式更新为新的样式.
通常使用百分比来规定变化发生的时间,或者使用关键词from和to,等同于从0%和100%, 0%是动画的开始,100%是动画的结束.
animation的语法,除了上面列出的transition动画的四个属性之外,还增加了如下属性:
- animation-iteration-count 动画播放的次数
- animation-drection 规定动画是否在下个周期逆向播放,默认是normal
- animation-play-state 规定动画是否正在运行或者暂停,默认是running
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JOE</title>
<style type="text/css">
#test{
background: red;
width: 80px;
height: 80px;
animation: myAnimation 5s;
position: absolute;
top: 20px;
left: 20px;
}
@keyframes myAnimation{
0%{
top: 20px;
left: 20px;
background: red;
}
25%{
top: 20px;
left: 200px;
background: yellow;
}
50%{
top: 200px;
left: 200px;
background: pink;
}
75%{
top: 200px;
left: 20px;
background: purple;
}
100%{
top: 20px;
left: 20px;
background: red;
}
}
</style>
</head>
<body>
<div id='test'></div>
</body>
</html>
