從零開始前端學習[33]:Cs3中的transition過渡-animation動畫
阿新 • • 發佈:2019-01-27
Cs3中的transition過渡-animation動畫
- transition過渡
- animation動畫
transition過渡
記得在html學習中,提到過transition和transform這兩個屬性值,transfrom對應的是動畫,transition對應的是過度過程。
而這個transition就是這個過渡過程,其詳細屬性主要包括一下幾個,
屬性 | 屬性值 |
---|---|
transition-property | 要過渡的屬性的名稱 |
transition-duration | 過渡效果持續時間 |
transition-delay | 延遲過渡時間(可以不寫) |
transition-timing-function | 過渡效果的執行曲線,有linear(勻速),ease(慢快慢),ease-in(勻加速),ease-out(勻減速) |
transition複合屬性 | 複合屬性的使用,也就是上述幾個屬性的結合使用 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明當前網頁的編碼集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--編輯器的名稱-->
<meta name="Author" content="作者是誰">
<meta name="Keywords" content="關鍵詞">
<meta name="Description" content="描述和簡介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;box-shadow: 0 0 10px 0 deeppink;margin: 20px auto;border: 1px solid transparent}
.main p{width: 50px;height: 50px;background-color: #00dd00;text-align: center;margin:10px;line-height: 50px}
.main .circle{border-radius: 50%;transition: 3s}
.main .circle:hover{transform: rotate(360deg)}
.main p:nth-child(2){
transition-property: width,font-size,line-height;
transition-duration: 3s;
transition-timing-function: linear}
.main p:nth-child(2):hover{width: 800px;height: 100px;font-size: 30px;line-height: 100px}
/*s使用複合屬性*/
.main p:nth-child(3){
transition: width 2s linear,height 3s ease,color 3s ease-in,line-height 2s linear}
.main p:nth-child(3):hover{width: 800px;height: 100px;font-size: 30px;color: red;
line-height: 100px}
/*使用一般的過渡**/
.main p:nth-child(4){
transition-property: width,line-height;
transition-duration: 3s;
transition-delay:2s;
transition-timing-function: ease}
.main p:nth-child(4):hover{width: 600px;line-height: 50px;}
/**勻加速*/
.main p:nth-child(5){
transition-property: width;
transition-duration: 3s;
transition-timing-function:ease-in }
.main p:nth-child(5):hover{width: 600px;line-height: 50px;}
/*勻減速*/
.main p:nth-child(6){
transition-property: width;
transition-duration: 3s;
transition-timing-function:ease-out }
.main p:nth-child(6):hover{width: 600px;line-height: 50px;}
</style>
</head>
<body>
<div class="main">
<p class="circle">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
</div>
</body>
</html>
顯示效果如下所示:
注意複合屬性的時候,是可以跟多個過渡效果的,如果針對每個不同的屬性設定不同的過渡效果
animation動畫
相比過度來說,整個動畫的難度上面是大了很多很多的,不再是簡單的動畫,很多時候css3都是需要去做自定義動畫,這裡面涉及到一些簡單的邏輯關係等。其主要分為以下幾個步驟:
- 定義動畫
- 動畫呼叫及相關屬性設定
定義動畫
動畫的定義大概形式如下所示:注意,動畫是需要用到定位的,否則無法在父級中進行位置設定,動畫名稱可以隨意進行設定
@-webkit-keyframes animationname{
keyframes-selector{css-style}
}
animationname:自定義動畫名稱
keyframes-selector:動畫時長百分比
0%-100%(在之間需要執行什麼事件)
from(0%) to(100%)
Css-style:一個或多個合法的css屬性
第一種關於動畫定義的形式(根據其中的各個狀態來進行劃分):
@-webkit-keyframes play{
0%{left:0; top: 0;}/*動畫開始時的初始狀態,可以不寫*/
25%{left:400px; top: 0;}/*動畫從0到25%的目的地*/
50%{left:400px; top: 300px;} /*動畫從25%到50%的目的地*/
75%{left:0; top: 300px;} /**動畫從50%到75%的目的地*/
0%{left:0; top: 0;} /*可以不寫,不寫也有預設的,是回到起點*/
}
第二種關於動畫定義的形式(根據):
@-webkit-ketframes play{
from(left 0px; top:0px);
to(left 400px;top 0px);
}
第二種的形式相對來說比較簡單點,用比較少,因為其只有兩種狀態,一個是起點狀態,另外一個是終點狀態
動畫呼叫及相關屬性設定
動畫定義完畢之後,只需要在css中進行引用和呼叫的,包括了一些屬性,比如全過程的時間,延遲時間,動畫執行的曲線,播放次數,以及是否反向等一些屬性設定的
關於動畫的單個屬性設定
屬性 | 屬性含義 | 屬性值 |
---|---|---|
animation-name | 動畫名稱 | 屬性值為自定義的動畫的名字 |
animation-duration | 動畫持續的時間 | 類似4s這樣的設定 |
animation-delay | 動畫延遲執行的時間 | 類似4s這樣的設定 |
animation-timing-function | 動畫運動曲線 | linear(線性),ease(慢快慢),ease-in(勻加速),ease-out(勻減速) |
animation-iteration-count | 動畫執行的次數 | 可以直接設定為具體次數,沒有單位,或者infinite無限迴圈 |
animation-direction | 是否反向播放動畫 | alternation為反向播放動畫 |
animation-play-state | 動畫的開關 | runing(動畫開),paused(動畫關) |
例項程式碼如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明當前網頁的編碼集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--編輯器的名稱-->
<meta name="Author" content="作者是誰">
<meta name="Keywords" content="關鍵詞">
<meta name="Description" content="描述和簡介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
div {width: 500px;height: 400px;position: relative;box-shadow: 0 0 10px 0 deeppink;margin:10px auto;border: 1px solid red}
div p{width: 100px;height: 100px;position: absolute;left: 0;top: 0;background-color: greenyellow;line-height: 100px;text-align: center}
.box1 p{
animation-name: box1_p_animation; /*動畫名稱載入*/
animation-duration: 4s; /*動畫持續時間*/
animation-delay: 1s; /**動畫的延長時間*/
animation-iteration-count:infinite ; /**動畫執行的次數*/
animation-timing-function: ease; /**動畫運動的速度*/
animation-direction: alternate ; /*動畫是否執行*/
}
.box1 p{animation-play-state: paused}
.box1:hover p{animation-play-state: running}
.box2 p{
animation-name: box2_p_animation;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count:infinite ; /**動畫執行的次數*/
animation-timing-function: ease; /**動畫運動的速度*/
animation-direction: alternate ;
}
@-webkit-keyframes box1_p_animation {
0%{left:0;top: 0}
25%{left: 400px;top:0}
50%{left:400px;top:300px}
75%{left:0px; top: 300px;}
0%{
left: 0px;
top: 0px;}
}
@-webkit-keyframes box2_p_animation{
from{left: 0px;top: 0px}
to{
left: 400px;
top: 300px;}
}
</style>
</head>
<body>
<div class="box1">
<p>first</p>
</div>
<div class="box2">
<p>second</p>
</div>
</body>
</html>
顯示效果:
以上就是關於動畫的最簡單的案例程式碼
歡迎持續訪問部落格