使用css实现动画有两种方式,animation和transition。
一.transition(过渡)
它有四个属性:
- transition-property规定设置过渡效果的 CSS 属性的名称
- transition-duration规定完成过渡效果需要多少秒或毫秒
- transition-timing-function规定速度效果的速度曲线
- transition-delay定义过渡效果何时开始
<style>
*{
margin: 0;
padding: 0;
}
.div1{
width: 100px;
height: 100px;
background-color: red;
transition: transform 2s ease 2s;
}
.div1:hover {
background-color: #fff;
transform: translateX(50%);
}
</style>
<body>
<div class="div1"></div>
</body>
初学css时,比较容易混淆transform(变形)、transition(过渡)、translate(移动)。transform(变形)是CSS3中的元素的属性,而translate只是transform的一个属性值;transform可以设置为transition(过渡动画)的transition-property的一个属性值。
二.animation
animation属性结合@ keyframes使用, animation中的animation-name需要设置成@ keyframes的name一致。
- animation-name规定需要绑定到选择器的 keyframe 名称
- animation-duration规定完成动画所花费的时间,以秒或毫秒计
- animation-timing-function规定动画的速度曲线
- animation-delay规定在动画开始之前的延迟
- animation-iteration-count规定动画应该播放的次数
- animation-direction规定是否应该轮流反向播放动画
- animation-play-state规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式
- animation-fill-mode指定动画是否正在运行或已暂停
@keyframes redToBlue{
from{
background: red;
}
20%{
background:green;
}
40%{
background:lime;
}
60%{
background:yellow;
}
to{
background:blue;
}
}
div {
width: 200px;
height: 200px;
background: red;
margin: 20px auto;
animation-name:redToBlue;
animation-duration: 5s;
animation-timing-function: ease;
animation-delay: 1s;
animation-fill-mode:forwards;
}