当前位置:Gxlcms > html代码 > (一)CSS3动画应用

(一)CSS3动画应用

时间:2021-07-01 10:21:17 帮助过:69人阅读

@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  2  3  4      5     demo 6      7  8  9     10     
    11
    12 13 14
    15
    16 17 18
    19
    20

    加入JS

     1 

    人气教程排行