CSS中animate属性

时间 2019-11-17

标签 css animate 属性栏目 CSS 繁體版

原文原文链接

我记得，在工做中直接使用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;
css

<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>

View Code