什么是動畫
動畫就是元素從一種樣式過渡到另一種樣式的效果
@keyframes
@keyframes規(guī)則用于創(chuàng)建動畫，在@keyframes中規(guī)定某種css樣式昨忆，就可以創(chuàng)建由當前樣式過渡到其他樣式的動畫效果。
- 使用用百分比來規(guī)定發(fā)生變化的時間
@keyframes mymove {
0% {background-color: red;}
25% {background-color: green;}
50% {background-color: blue;}
100% {background-color: yellow;}
}
- 使用關鍵字from和to古劲，等同于0%和100%
@keyframes mymove {
from {background-color: red;}
to {background-color: yellow;}
}
將動畫綁定到div元素上
div.move {
animation: mymove 5s;
-moz-animation: mymove 5s; /* Firefox */
-webkit-animation: mymove 5s; /* Safari和Chrome */
-o-animation: mymove 5s; /* Opera */
}
animation屬性
animation-name: @keyframes動畫的名稱
animation-duration：完成動畫一個周期需要花費的秒或者毫秒惑折。默認為0(0表示不播放動畫)
animation-timing-function: 動畫的速度曲線。默認是"ease"
- linear：動畫從頭到尾的速度是相同的
- ease：默認倘是。動畫以低速開始，然后加快袭艺，最后在結束前變慢
- ease-in： 動畫以低速開始
- ease-out：動畫以低速結束
- ease-in-out：動畫以低速開始和結束
- cubic-bezier(n, n, n, n)：在cubic-bezier函數中設置自己的值搀崭。可能的值是從0到1的數值(數值越大速度越慢)
animation-delay：動畫開始前延遲時間猾编。默認是0
animation-iteration-count：動畫播放次數瘤睹。默認是1
animation-direction：動畫是否在下一周期逆向播放。默認是"normal" - normal：默認答倡。動畫正常播放
- alternate：動畫輪流反向播放
animation-play-state：動畫是否正在運行或暫停轰传。默認running - running：默認。動畫正在播放
- paused：動畫已暫停
animation-fill-mode：動畫時間之外的狀態(tài) - none: 不改變默認行為
- forwards：動畫完成后瘪撇，保持最后一個屬性(在最后一個關鍵幀中定義)
- backwards：在animation-delay所指定的一段時間內叼屠，在動畫顯示之前殉疼，應用開始屬性(在第一個關鍵幀中定義)
- both:向前和向后填充模式都被應用
簡單的動畫效果(會將之后寫的一些小動畫demo貼在這邊)
- 文字逐漸變色
html
<div>
<p>離開我你會遇到更好的人</p>
<p>離開我你會遇到更好的人</p>
</div>
css
p {
position: absolute;
color: #ddd;
width: 176px;
}
p:nth-child(2) {
color: green;
white-space: nowrap;
overflow: hidden;
animation: 10s cg linear;
}
@keyframes cg {
from{width: 0;}
}
@-webkit-keyframes cg
{
from{width: 0;}
}
其實動畫就是改變寬度设联，達到文字逐漸顯示的目的
