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

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.轮播图测试代码



    
    CSS_animation
    


    

5.border绘制三角形、梯形



    
    CSS_graph
    


    

  

你可能感兴趣的:(WEB前端第十七课——CSS动画)