【CSS基础 】动画animation

2017-01-01 21:59:26来源:CSDN作者:a5534789人点击

第七城市

作为博主简单记录: 深入学习请查看文末参考资料

前面有提到过过渡效果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

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台