CSS中animate属性
我记得,在工作中直接使用animation,只要能做出动画就完了,根本没有看每一个细节。
其实,这样做对于我们来说,的确没有错,因为工作中没有时间给你看每一个细节,大致看一篇就没下文了。
当我们想要好好理清头绪时,我才会想起以前见过的每一个知识点,然而这样做也没有错,但是这样做很明显不是明智的选择。
我觉得做一件事,都有一个计划,只有计划好,不懂得标记好,后面慢慢的一个个地解决,才会不落下学习的要点,好了,不说了,要睡了
animation-name表示为 @keyframes 动画规定名称;
语法:animation-name :keyframename|none;
animation-duration表示动画完成一个周期所需要的时间;
语法:animation-duration: time;
animation-timing-function 表示规定动画的速度(speed);
语法:animation-timing-function: value;
value有哪些:linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n);
animation-fill-mode表示填充模式;
语法:animation-fill-mode : none | forwards | backwards | both;
animation-delay 表示动画即将开始。
语法:animation-delay: time;
animation-iteration-count表示播放动画次数;
语法:animation-iteration-count:n|infinite(无限循环);
animation-direction表示重复一次动画,也可以来回的运动并重复。
语法:animation-direction: normal|alternate;
animation: name duration timing-function delay iteration-count direction;
<!-- 参考学习http://www.w3school.com.cn/cssref/pr_animation.asp -->
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<html> <head> <style> body{ background-color:rgba(31,11,71,.8) } .circle{ position:absolute; left:46%; top:30%; width:20px; height:20px; border-radius:15px; background-color:rgba(21,21,29,.7); -webkit-animation:myname 2s linear infinite; animation:myname 7s linear infinite; } @keyframes myname { 0% { left:46%; top:30%; } 25% { left:56%; top:20%; } 50% { left:66%; top:40%; } 75% { left:56%; top:60%; } 100% { left:46%; top:30%; } } @-webkit-keyframes myname { 0% { left:46%; top:30%; } 25% { left:56%; top:20%; } 50% { left:66%; top:40%; } 75% { left:56%; top:60%; } 100% { left:46%; top:30%; } } h1{ animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; } </style> </head> <body> <div class="circle"></div> </body> </html>