css3 動畫總結
阿新 • • 發佈:2019-01-31
在用css3建立動畫效果之前,首先要先了解下@keyframes 規則
@keyframes 規則用於建立動畫。在 @keyframes 中規定某項 CSS 樣式,就能建立由當前樣式逐漸改為新樣式的動畫效果。
Internet Explorer 10、Firefox 以及 Opera 支援 @keyframes 規則和 animation 屬性。
Chrome 和 Safari 需要字首 -webkit-。
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
類似這個,from,to相當於0%和100%,也就是起始跟結束時的狀態
myfirst就是你定義的動畫效果名稱,可以把它捆綁到任意一個選擇器裡。
當你需要在某個選擇器使用這個動畫效果的時候,就需要用animation,他可以捆綁寫好的動畫效果
div
{
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
這裡直接複製的w3school的例子,應該很容易看懂
animation有很多個屬性,可以根據自己要求去查詢,包括規定時長,速度,迴圈次數之類的
另外,還有一個標籤,transform
transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
一般晃動旋轉之類的特效做起來看起來比較炫酷
舉幾個例子,比如做一個地球轉動的效果,結合animation的動畫效果和transform的rotate就很好實現
@-webkit-keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.Rotation{
animation: rotation 3s linear infinite;
-moz-animation: rotation 3s linear infinite;
-webkit-animation: rotation 3s linear infinite;
-o-animation: rotation 3s linear infinite;
}
還有左右晃動效果
@-webkit-keyframes shakelr
{
0% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
33% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
66% {
-webkit-transform: rotate(15deg);
transform: rotate(15deg);
}
100% {
-webkit-transform: rotate(-15deg);
transform: rotate(-15deg);
}
}
.shakelr {
transform-origin: center;
-webkit-transform-origin: center;
animation: shakelr 1s infinite alternate ease-in-out;
-webkit-animation: shakelr 1s infinite alternate ease-in-out;
}
上下晃動效果
@keyframes shaketb {
0%,100%,20%,50%,80% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
40% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
60% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px)
}
}
.shaketb {
animation: shaketb 1.5s infinite alternate ease-in-out;
-webkit-animation: shaketb 1.5s infinite alternate ease-in-out;
}
這只是最簡單的效果,如果還要做的更炫可能還要配合其他的屬性之類的