溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css3中怎么實(shí)現(xiàn)動(dòng)畫效果

發(fā)布時(shí)間：2021-08-11 11:33:22 來源：億速云 閱讀：220 作者：Leah 欄目：web開發(fā)

今天就跟大家聊聊有關(guān)css3中怎么實(shí)現(xiàn)動(dòng)畫效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

css3的動(dòng)畫功能有以下三種:

1、transition(過度屬性)
2、animation(動(dòng)畫屬性)
3、transform(2D/3D轉(zhuǎn)換屬性)

下面逐一進(jìn)行介紹我的理解：

1、transition:<過渡屬性名稱> <過渡時(shí)間> <過渡模式>

如-webkit-transition:color 1s;

等同于:

-webkit-transition-property:color;

-webkit-transition-duration:1s;

多個(gè)屬性的過渡效果可以這樣寫：

方法1：-webkit-transition:<屬性1> <時(shí)間1> ,<屬性2> <時(shí)間2> ,。。。

方法2：

-webkit-transition:<屬性1> <時(shí)間1>;

-webkit-transition:<屬性2> <時(shí)間2>;

transition-timing-function屬性值有5個(gè):

ease:緩慢開始，緩慢結(jié)束

liner:勻速

ease-in:緩慢開始

ease-out:緩慢結(jié)束

ease-in-out:緩慢開始，緩慢結(jié)束（和ease稍有區(qū)別）

實(shí)例：
transition過渡效果

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <!DOCTYPE html>  

  2. <html lang="en">  

  3. <head>  

  4.     <meta charset="UTF-8">  

  5.     <title>transition過渡效果</title>  

  6.     <style>  

  7.         *{   

  8.             margin: 0px;   

  9.             padding: 0px;   

  10.         }   

  11.         #box{   

  12.             width: 200px;   

  13.             height: 200px;   

  14.             background-color: chocolate;   

  15.             position: relative;   

  16.             left: 0px;   

  17.             top: 0px;   

  18.             transition: top 5s ease,left 5s ease ;   

  19.             -moz-transition: top 5s ease,left 5s ease ; /* Firefox 4 */   

  20.             -webkit-transition: top 5s ease,left 5s ease ; /* Safari and Chrome */   

  21.             -o-transition: top 5s ease,left 5s ease ; /* Opera */   

  22.         }   

  23.         .btn{   

  24.             width: 512px;   

  25.             margin: 0 auto;   

  26.             border: 2px solid #e3e3e3;   

  27.             border-radius: 5px;   

  28.             padding: 10px;   

  29.   

  30.         }   

  31.         .btn button{   

  32.             width: 80px;   

  33.             height: 40px;   

  34.             text-align: center;   

  35.             line-height: 40px;   

  36.             margin-right: 20px;   

  37.         }   

  38.         button:last-child{   

  39.             margin-right: 0px;   

  40.         }   

  41.     </style>  

  42.     <script>  

  43.         window.onload=function(){   

  44.             var e1 = document.getElementById("e1");   

  45.             var e2 = document.getElementById("e2");   

  46.             var e3 = document.getElementById("e3");   

  47.             var e4 = document.getElementById("e4");   

  48.             var e5 = document.getElementById("e5");   

  49.             var box = document.getElementById("box");   

  50.             e1.onclick=function(){   

  51.                 box.style.left = 1000+"px";   

  52.                 box.style.top = 100+"px";   

  53.                 box.style.transitionTimingFunction="ease";   

  54.             };   

  55.             e2.onclick=function(){   

  56.                 box.style.right = 0+"px";   

  57.                 box.style.top = 0+"px";   

  58.                 box.style.transitionTimingFunction="liner";   

  59.             };   

  60.             e3.onclick=function(){   

  61.                 box.style.right = 1000+"px";   

  62.                 box.style.top = 100+"px";   

  63.                 box.style.transitionTimingFunction="ease-in";   

  64.             };   

  65.             e4.onclick=function(){   

  66.                 box.style.left = 0+"px";   

  67.                 box.style.top = 0+"px";   

  68.                 box.style.transitionTimingFunction="ease-out";   

  69.             };   

  70.             e5.onclick=function(){   

  71.                 box.style.left = 1000+"px";   

  72.                 box.style.top = 100+"px";   

  73.                 box.style.transitionTimingFunction="ease-in-out";   

  74.             };   

  75.   

  76.         }   

  77.     </script>  

  78. </head>  

  79. <body>  

  80.     <div id="box"></div>  

  81.     <br>  

  82.     <br>  

  83.     <br>  

  84.     <br>  

  85.     <br>  

  86.     <br>  

  87.     <hr>  

  88.     <br>  

  89.     <br>  

  90.     <br>  

  91.     <div class="btn">  

  92.         <button id="e1">ease</button>  

  93.         <button id="e2">liner</button>  

  94.         <button id="e3">ease-in</button>  

  95.         <button id="e4">ease-out</button>  

  96.         <button id="e5">ease-in-out</button>  

  97.     </div>  

  98. </body>  

  99. </html>  

2、動(dòng)畫屬性animation

animation: name duration timing-function delay iteration-count direction;

值

描述

animation-name

規(guī)定需要綁定到選擇器的 keyframe 名稱。。

animation-duration

規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。

animation-timing-function

規(guī)定動(dòng)畫的速度曲線。

animation-delay

規(guī)定在動(dòng)畫開始之前的延遲。

animation-iteration-count

規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。

animation-direction

規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫。

注釋：Internet Explorer 9 以及更早的版本不支持 animation 屬性。

@keyframes animationname {keyframes-selector {css-styles;}}

值

描述

animationname

必需。定義動(dòng)畫的名稱。

keyframes-selector

必需。動(dòng)畫時(shí)長的百分比。

合法的值：

  • 0-100%

  • from（與 0% 相同）

  • to（與 100% 相同）

css-styles

必需。一個(gè)或多個(gè)合法的 CSS 樣式屬性。

以百分比來規(guī)定改變發(fā)生的時(shí)間，或者通過關(guān)鍵詞 "from" 和 "to"，等價(jià)于 0% 和 100%。

0% 是動(dòng)畫的開始時(shí)間，100% 動(dòng)畫的結(jié)束時(shí)間。

例如：

CSS Code復(fù)制內(nèi)容到剪貼板

  1. 　　animation:mymove 5s infinite;   

  2.   

  3. 　　@keyframes mymove{   

  4.   

  5. 　　　　from{ top:0px; }   

  6.   

  7. 　　　　to{ top:200px; }   

  8.   

  9. 　　}  

還可以這么寫：

CSS Code復(fù)制內(nèi)容到剪貼板

  1. 　　@keyframes mymove{   

  2.   

  3. 　　　　0%{ top:0px; }   

  4.   

  5. 　　　　25%{ top:200px; }   

  6.   

  7. 　　　　50%{ top:100px; }   

  8.   

  9. 　　　　75%{ top:200px; }   

  10.   

  11. 　　　　100%{ top:0px; }   

  12.   

  13. 　　}   

 案例：
css3的animation效果

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <!DOCTYPE html>  

  2. <html>  

  3. <head>  

  4. <style>    

  5. div   

  6. {   

  7. width:100px;   

  8. height:100px;   

  9. background:red;   

  10. position:relative;   

  11. animation:mymove 5s infinite;   

  12. -moz-animation:mymove 5s infinite; /* Firefox */   

  13. -webkit-animation:mymove 5s infinite; /* Safari and Chrome */   

  14. -o-animation:mymove 5s infinite; /* Opera */   

  15. }   

  16.   

  17. @keyframes mymove   

  18. {   

  19. from {top:0px;}   

  20. to {top:200px;}   

  21. }   

  22.   

  23. @-moz-keyframes mymove /* Firefox */   

  24. {   

  25. from {top:0px;}   

  26. to {top:200px;}   

  27. }   

  28.   

  29. @-webkit-keyframes mymove /* Safari and Chrome */   

  30. {   

  31. from {top:0px;}   

  32. to {top:200px;}   

  33. }   

  34.   

  35. @-o-keyframes mymove /* Opera */   

  36. {   

  37. from {top:0px;}   

  38. to {top:200px;}   

  39. }   

  40. </style>  

  41. </head>  

  42. <body>  

  43.   

  44. <p><b>注釋：</b>本例在 Internet Explorer 中無效。</p>  

  45.   

  46. <div></div>  

  47.   

  48. </body>  

  49. </html>  

3、設(shè)置3D場景（即transform）

-webkit-perspective:800;(單位為像素)--即三維物體距離屏幕的距離。

-webkit-perspective-origin:50% 50%;(這個(gè)屬性代表了人眼觀察的視野。50% 50%為X軸、Y軸相應(yīng)的位置，即屏幕的正中央。)

 　　css3中怎么實(shí)現(xiàn)動(dòng)畫效果

使用transform屬性調(diào)整元素：-webkit-transform-style:-webkit-perserve-3d;(這個(gè)屬性是告訴瀏覽器我們是在一個(gè)三維空間中對元素進(jìn)行操作)

(1)、translate(移動(dòng)距離)

　　　　translateX（x px）

　　　　translateY（y px）

　　　　translateZ（z px）

(2)、rotate(旋轉(zhuǎn)角度)

　　　　rotateX(x deg)

　　　　rotateY(y deg)

　　　　rotateZ(z deg)

 　　css3中怎么實(shí)現(xiàn)動(dòng)畫效果

transform：rotate（45deg）

rotateX:向屏幕上邊沿向內(nèi)旋轉(zhuǎn)為正方向。

rotateY:向屏幕豎直向下為正方向。

rotateZ:向屏幕外為正方向。

一個(gè)div塊，右邊沿向屏幕內(nèi)旋轉(zhuǎn)45deg,即應(yīng)設(shè)置為：Transform：rotateY（45deg）。

實(shí)例：

transform3D轉(zhuǎn)換效果

XML/HTML Code復(fù)制內(nèi)容到剪貼板

  1. <!DOCTYPE html>  

  2. <html lang="en">  

  3. <head>  

  4.     <meta charset="UTF-8">  

  5.     <title>transform3D轉(zhuǎn)換效果</title>  

  6.     <style>  

  7.         *{   

  8.             margin: 0px;   

  9.             padding: 0px;   

  10.         }   

  11.         #box{   

  12.             width: 200px;   

  13.             height: 200px;   

  14.             background-color: chocolate;   

  15.             position: relative;   

  16.             left: 0px;   

  17.             top: 0px;   

  18.             perspective:800px;   

  19.             perspective-origin:50% 50%;   

  20.             transform-style: preserve-3d;   

  21.             transform-origin:0% 100%;//以Y軸為旋轉(zhuǎn)中心   

  22.         }   

  23.         p{   

  24.             margin:20px 520px;   

  25.         }   

  26.         .btn{   

  27.             width: 300px;   

  28.             margin: 0 auto;   

  29.             border: 2px solid #e3e3e3;   

  30.             border-radius: 5px;   

  31.             padding: 10px;   

  32.   

  33.         }   

  34.         .btn button{   

  35.             width: 80px;   

  36.             height: 40px;   

  37.             text-align: center;   

  38.             line-height: 40px;   

  39.             margin-right: 20px;   

  40.         }   

  41.         button:last-child{   

  42.             margin-right: 0px;   

  43.         }   

  44.     </style>  

  45.     <script>  

  46.         window.onload=function(){   

  47.             var tx = document.getElementById("tx");   

  48.             var ty = document.getElementById("ty");   

  49.             var tz = document.getElementById("tz");   

  50.             var rx = document.getElementById("rx");   

  51.             var ry = document.getElementById("ry");   

  52.             var rz = document.getElementById("rz");   

  53.             var box = document.getElementById("box");   

  54.             tx.onclick=function(){   

  55.                 box.style.transform = "translateX(500px)";   

  56.             };   

  57.             ty.onclick=function(){   

  58.                 box.style.transform = "translateY(400px)"  

  59.             };   

  60.             rx.onclick=function(){   

  61.                 box.style.transform = "rotateX(30deg)"  

  62.             };   

  63.             ry.onclick=function(){   

  64.                 box.style.transform = "rotateY(30deg)"  

  65.             };   

  66.             rz.onclick=function(){   

  67.                 box.style.transform = "rotateZ(30deg)"  

  68.             };   

  69.         }   

  70.     </script>  

  71. </head>  

  72. <body>  

  73.     <div id="box"></div>  

  74.     <br>  

  75.     <br>  

  76.     <br>  

  77.     <br>  

  78.     <br>  

  79.     <br>  

  80.     <hr>  

  81.     <br>  

  82.     <br>  

  83.     <br>  

  84.     <p>translate(移動(dòng)距離)</p>  

  85.     <div class="btn">  

  86.         <button id="tx">translateX</button>  

  87.         <button id="ty">translateY</button>  

  88.     </div>  

  89.     <p>rotate(旋轉(zhuǎn)角度)</p>  

  90.     <div class="btn">  

  91.         <button id="rx">rotateX</button>  

  92.         <button id="ry">rotateY</button>  

  93.         <button id="rz">rotateZ</button>  

  94.     </div>  

  95. </body>  

  96. </html>  

使用transform-origin屬性調(diào)整旋轉(zhuǎn)中心。默認(rèn)旋轉(zhuǎn)中心點(diǎn)為div盒子的正中心。

這個(gè)旋轉(zhuǎn)中心是可以改變的：

　　　　X軸：left、center、right.

　　　　Y軸：top、center、bottom.

　　　　Z軸：length px(一個(gè)長度值)。

看完上述內(nèi)容，你們對css3中怎么實(shí)現(xiàn)動(dòng)畫效果有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手