作为博主简单记录: 深入学习请查看文末参考资料
前面有提到过过渡效果css transition,实际上过渡效果也可以算作一种动画,这是这种动画是单次的不重复的,而且过渡中我们可能需要其他精细操作办不到,这个时候我们需要用到animation了。
举个简单的例子:
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes changeColor {
from {background-color:lightseagreen}
to {background-color:indianred}
}
div.color-change-target {
background-color: lightseagreen;
width:50px;
height: 50px;
border-radius: 25px;
animation: changeColor 5s ease-in-out 2s infinite ;
margin: 10px auto;
}
div.color-change-target2 {
background-color: lightseagreen;
width:50px;
height: 50px;
border-radius: 25px;
/*animation: changeColor 5s ease-in-out 2s 1 ;*/
margin: 10px auto;
}
div.color-change-target2:hover {
background-color:indianred;
transition: background-color 5s
}
</style>
</head>
<body>
<div class="anitation">
<div class="color-change-target"></div>
<div class="color-change-target2"></div>
</div>
</body>
</html>
请尝试上面的代码,你会发现 hover 到第二个类名为color-change-target2 的div上的时候 背景颜色的变化 和第一个div 在页面载入2s之后的背景颜色变化一模一样。
好的我们直接根据上面的代码来,@keyframes 关键字,这个关键字可以定义在这个过渡转换中 从0-100 【这里0是转换开始,100是转换结束】 这个过程中 每一步的变化。实际上上面定义changeColor的代码可以写成这样,他们是等价的:
@keyframes changeColor {
0% {background-color:lightseagreen}
100% {background-color:indianred}
}
我们进一步修改代码:
@keyframes changeColor {
0% {background-color:lightseagreen}
50% {background-color:indianred; border-radius: 0}
100% {background-color:lightseagreen;border-radius: 25px}
}
刷新页面你会看到,在变化的这5s内 在第2.5s时,圆角不在变成了矩形,并且背景颜色变成了红色。
当然你在定义的时候,完全可以设定1% 2% 3%…..并且设定不同属性组合。当然这里面的css属性 和 transition支持的属性是一模一样,也就是说这些属性(传送门)被设定才会有动画效果。 MDN 参考
animation 和 transition一样是一些列属性的简写形式.
你可以加上试试这个效果:
.circle {
width: 30px;
height: 30px;
border-radius: 30px;
background-color:aquamarine;
margin-bottom: 30px;
margin-left: 30px;
animation: scaling 1s infinite ease-in-out;
}
@keyframes scaling{
0%{
opacity:0.3;
transform: scale(1,1);
box-shadow: 0px 0px 0px mediumseagreen;
}
100%{
opacity:1;
transform: scale(1.2,1.2);
box-shadow: 0px 0px 10px mediumseagreen;
}
}
深入学习请狠狠的点击这个:
大漠老师 CSS3 animation
w3c animation
MDN animtaion