WEB前端第十七课——CSS动画

  • A+
所属分类:Web前端
摘要

1.animation动画  transition属性只能简单模拟动画效果,而animation属性可以制作类似Flash动画

1.animation动画

  transition属性只能简单模拟动画效果,而animation属性可以制作类似Flash动画

  通过关键帧控制动画的每一步,使元素从一中样式变为另一种样式,实现复杂的动画效果

2.@keyframes,用于声明动画,指定关键帧

  帧,用于分解动画动作,每一帧代表某个时间点

  书写格式:

  @keyframes name(自定义名称){

    from | 0% {  CSS样式  }

    percent | n% {  CSS样式  }

    to | 100% {  CSS样式  }

  }

3.animation属性,用于调用及控制由@keyframes定义的动画

  简写属性书写格式:animation:name  duration  timing-function  delay  iteration-count  direction

  animation-name,设置需要调用的@keyframes动画的名称

  animation-duration,播放动画持续的时间周期,时间单位 s/ms

  animation-timing-function,设置动画播放的时间曲线,属性值与 transition-timing-function相同,包括 linear、ease、ease-in、ease-out、ease-in-out等

  animation-delay,设置动画何时开始(延迟时间)

  animation-iteration-count,设置动画播放的次数,属性值:n(数值,默认为1)、infinite(无限次/永远)

  animation-direction,设置循环交替时反向播放动画,

             属性值:normal(正常播放,默认)、reverse(反向播放)、alternate(奇数次正向播放、偶数次反向播放)、alternate-reverse(奇数次反向播放、偶数次正向播放)

  animation-fill-mode,规定当动画未播放时(播放完或开始前)应用到元素的样式,

             属性值:none(无样式,默认)、forwards(在动画结束后(由animation-iteration-count决定)应用该属性值)、

                backwards(应用在animation-delay定义期间启动动画的第一次迭代的关键帧中定义的属性值)

                both(同时遵循forwards和backwards 的规则)

  animation-play-state,运行或暂停动画,属性值:paused(暂停)、running(运行,默认)

4.轮播图测试代码

<html> <head>     <meta charset="utf-8">     <title>CSS_animation</title>     <style>         .cont{             width: 600px;             height: 600px;             background-color: #e5e5e5;             margin: 50px auto;             background-image: url("images/number/one.jpg");             background-repeat: no-repeat;             background-position: center;             -webkit-animation: rot 8s ease-in 1s 3 alternate forwards;         }         @-webkit-keyframes rot {             0%{                 background-image: url("images/number/one.jpg");             }             25%{                 background-image: url("images/number/two.jpg");             }             50%{                 background-image: url("images/number/three.jpg");             }             75%{                 background-image: url("images/number/four.jpg");             }             100%{                 background-image: url("images/number/five.jpg");             }         }     </style> </head> <body>     <div class="cont">     </div> </body> </html> 

5.border绘制三角形、梯形

<html> <head>     <meta charset="utf-8">     <title>CSS_graph</title>     <style>         .cont{             width: 0px;    /* width=0时,三角形;width>0时,梯形;其他三个方向设置同理 ’*/             /*height: 100px;*/             background-color: transparent;             margin: 100px auto;             /*border-top: 120px solid red;*/             border-right: 120px solid transparent;             border-bottom: 120px solid green;             border-left: 120px solid transparent;         }     </style> </head> <body>     <div class="cont">     </div> </body> </html>