suchen

Heim  >  Artikel  >  Web-Frontend  >  （一）CSS3动画应用

（一）CSS3动画应用

WBOY
WBOYOriginal
2016-06-24 11:53:151570Durchsuche

@keyframes

规则用于创建动画。

@keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果

@keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

  • 规定动画的名称
  • 规定动画的时长

    • animation

    animation 属性是一个简写属性，用于设置动画属性：

  • animation-name：规定 @keyframes 动画的名称。
  • animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
  • animation-timing-function：规定动画的速度曲线。默认是 "ease"。
  • animation-delay：规定动画何时开始。默认是 0
  • animation-iteration-count：规定动画被播放的次数。默认是 1。
  • animation-direction：规定动画是否在下一周期逆向地播放。默认是 "normal"。
  • animation-fill-mode：规定对象动画时间之外的状态

    • 侧边栏实现

     1 /* 动画定义 */ 2 @-webkit-keyframes move_right { 3     from { 4         opacity: 0; 5     } 6     to { 7         opacity: 1; 8         -webkit-transform: translateX(120px); 9         transform: translateX(120px);10     }11 }12 @keyframes move_right {13     from {14         opacity: 0;15     }16     to {17         opacity: 1;18         -webkit-transform: translateX(120px);19         transform: translateX(120px);20     }21 }22 @-webkit-keyframes move_left {23     from {24         opacity: 1;25     }26     to {27         opacity: 0;28         -webkit-transform: translateX(-120px);29         transform: translateX(-120px);30     }31 }32 @keyframes move_left {33     from {34         opacity: 1;35     }36     to {37         opacity: 0;38         -webkit-transform: translateX(-120px);39         transform: translateX(-120px);40     }41 }42 @-webkit-keyframes move_up {43     from {44         opacity: 0;45     }46     to {47         opacity: 1;48         -webkit-transform: translateY(-250px);49         transform: translateY(-250px);50     }51 }52 @keyframes move_up {53     from {54         opacity: 0;55     }56     to {57         opacity: 1;58         -webkit-transform: translateY(-250px);59         transform: translateY(-250px);60     }61 }

     1 /* 动画绑定 */ 2 .move_right { 3     -webkit-animation-name            : move_right; 4     animation-name            : move_right; 5     -webkit-animation-duration        : 1s; 6     animation-duration        : 1s; 7     -webkit-animation-iteration-count : 1; 8     animation-iteration-count : 1; 9     -webkit-animation-fill-mode : forwards;10     animation-fill-mode : forwards;11 }12 .move_left {13     -webkit-animation-name            : move_left;14     animation-name            : move_left;15     -webkit-animation-duration        : 1s;16     animation-duration        : 1s;17     -webkit-animation-iteration-count : 1;18     animation-iteration-count : 1;19     -webkit-animation-fill-mode : forwards;20     animation-fill-mode : forwards;21 }22 .move_up {23     -webkit-animation-name            : move_up;24     animation-name            : move_up;25     -webkit-animation-duration        : 1s;26     animation-duration        : 1s;27     -webkit-animation-iteration-count : 1;28     animation-iteration-count : 1;29     -webkit-animation-fill-mode : forwards;30     animation-fill-mode : forwards;31 }32 .fadeIn {33     -webkit-transform : translateX(120px);34     transform : translateX(120px); 35     opacity: 1;36 }37 .fadeInUp {38     -webkit-transform : translateY(-250px);39     transform : translateY(-250px);40     opacity: 1;41     -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; 42     transition :transform .2s ease-out, opacity .2s ease-out;43 }44 .fadeOutLeft {45     -webkit-transform : translateX(-120px);46     transform : translateX(-120px); 47     opacity: 0.0;48     -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; 49     transition :transform .2s ease-out, opacity .2s ease-out;50 }

    html

     1 <!doctype html> 2 <html lang="en" class="fullHeight"> 3 <head> 4     <meta charset="UTF-8"> 5     <title>demo</title> 6     <link rel="stylesheet" type="text/css" href="sidebar.css"> 7 </head> 8 <body class="fullHeight"> 9     <div class='sidebar fullHeight'>sidebar</div>10     <div class="controller">11         <div>12             <button onclick="fadeIn()">淡进</button>13             <button onclick="fadeOut()">淡出</button>14         </div>15         <div>16             <button onclick="fadeInUp()">向上淡进</button>17             <button onclick="fadeOutLeft()">向左淡出</button>18         </div>19     </div>20     <script src="sidebarEffects.js"></script>21 </body>22 </html>

    加入JS

     1 <script> 2 var sidebarEl = document.querySelector(".sidebar"); 3  4 function fadeIn (e) { 5     sidebarEl.className = 'sidebar fullHeight'; 6     sidebarEl.style.top = '0px'; 7     sidebarEl.style.left = '0px'; 8     sidebarEl.classList.add('move_right'); 9 }10 function fadeOut (e) {11     sidebarEl.className = 'sidebar fullHeight';12     sidebarEl.style.left = '120px';13     sidebarEl.classList.add('move_left');14 }15 function fadeInUp(e) {16     sidebarEl.className = 'sidebar fullHeight';17     sidebarEl.style.top = '250px';18     sidebarEl.style.left = '120px';19     sidebarEl.classList.add('move_up');20 21 }22 function fadeOutLeft(e) {23     sidebarEl.className = 'sidebar fullHeight';24     sidebarEl.style.top = '0px';25     sidebarEl.style.left = '120px';26     sidebarEl.classList.add('move_left');27 28 }29 </script>

     

    Stellungnahme：
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Vorheriger Artikel：html、css容易被忽略的小知识点_html/css_WEB-ITnoseNächster Artikel：CSS实现居中的7种方法_html/css_WEB-ITnose

    In Verbindung stehende Artikel

    Mehr sehen