• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > CSS3常规使用(7):CSS 过度效果 与 动画效果

    CSS3常规使用(7):CSS 过度效果 与 动画效果

    作者: 分类:HTML5与CSS3.0 点击: 504 次
    wordpress CMS主题:ssmay主题

      在CSS3了来之前,要想在网页实现动画效果,一般都是通过JS代码来实现的。而是至从CSS3的到来,一些不太复杂的网页动画效果,通过CSS3就可以简单实现,这是CSS样式的一大进步,也给众多前端工程师们带来了惊喜。下面,就来看看CSS3的2个神奇功能:transition过渡效果和animation动画效果。

      1、过渡效果 transition

      transition过渡,主流浏览器都支持,IE10+以上的IE浏览器支持。

      transition-property 指定过渡CSS 属性,all 或 指定样式
      transition-duration 指定完成过渡所需的时间
      transition-delay 指定过渡延迟时间,如transition-delay: 0s, 1s, 0s;

      transition-timing-function 指定过渡的函数,有以下几种:

      ease 默认值,速度由快到慢,逐渐变慢。等同于贝塞尔曲线(0.25, 0.1,0.25, 1.0)
      linear 恒速。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
      ease-in 速度越来越快,加速状态。等同于贝塞尔曲线(0.42, 0,1.0, 1.0)
      ease-out 速度越来越慢,呈减速状态。等同于贝塞尔曲线(0, 0, 0.58,1.0)
      ease-in-out 先加速,再减速。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
      cubic-bezier 自定义值 如cubic-bezier(0.25, 0.67, 0.11, 0.55);
      steps 跳跃式过渡,如:steps(10,end); 10表示跳跃几次。end,可选值,表示结束时跳跃。

      简写案例1:

      transition: background-color 1s ease 0s, color 1s ease 0s, margin-left 1s ease 0s;

      这里对每个样式进行单独设置,这里操作了3个模式:background-color、color、margin-left。

      简写案例2:

      transition: all 2s ease 0s;

      如果每个样式都是统一的过渡,直接使用 all

      2、动画效果 animation

      animation动画效果,主流浏览器都支持,IE10+的IE浏览器支持。

      animation-name 指定一个关键帧动画的名称,这个动画名必须对应一个@keyframes 规则。
      animation-duration 播放所需的时间
      animation-timing-function 播放方式(跟过渡的方法一样。
      animation-delay 延迟时间
      animation-iteration-count 循环次数(默认1次,可修改数,也可无限次 infinite
      animation-direction 播放方向,默认向前,也可交替alternate 一次向前一次向后多次交替
      animation-play-state 播放状态,如停止动画 animation-play-state: paused;

      @keyframes 关键帧,基本格式,如:@keyframes name {...} //“name”可自定义

      animation-fill-mode 设置结束是否返回,有以下4个属性:

      none 默认值,表示按预期进行和结束
      forwards 动画结束后继续应用最后关键帧位置,即不返回['fɔ:wədz]向前
      backforwards 动画结束后迅速应用起始关键帧位置,即返回
      both 根据情况产生 forwards 或 backforwards 的效果

      animation简写案例:

      <div id="a"></div>
      <style>
      @keyframes name{ /* 先声明一个关键帧 */
      0%,100%{ /* 开始和结束时 */
      background:#ccc;
      margin-left:0;
      }
      50%{ /* 中间 */
      background:blue;
      margin-left:200px;
      }
      }
      #a {
      background:#ccc;
      width:100px;
      height:100px;
      animation:name 3s ease 2 alternate 2s both; /* 动画 */
      /* 关键帧名,播放时间,播放方式,播放次数,播放方向(交替),延迟时间, */
      }
      </style>



      QQ二维码

    文章作者:hero2018
    本文地址:http://wanlimm.com/77201807306314.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.