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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。