精华内容
下载资源
问答
  • CSS3动画

    2017-11-06 14:06:25
    CSS3动画

    CSS3动画

    1、animation动画属性

    animation-name: 取值是动画的名字;
    animation-duration: ;动画完成的之间
    animation-timing-function: ; 定义动画完成的方式
    animation-delay: ;动画的延迟时间
    animation-iteration-count: ;动画执行的次数 (infinite是无限循环的意思)
    animation-direction: ;规定动画执行的方向
    alternate 属性值是规定动画来回执行
    animation-state: ;规定动画是否执行默认值running , 当它为pause的时候便是暂停
    animation-fill-mode: ;规定动画开始之前和结束之后发生的操作,默认值为none;forwards表示动画结束后元素保留最后帧的状态,backwords则与forwards相反
    animation-play-state: running; !*动画的开始结束

    2、@keyframes

    规定一个动画,包括动画名称
    from规定了动画的初始状态
    to规定动画的末状态
    0%也可以表示动画初始状态
    100%表示动画的末状态
    比较倾向后者,因为后者可以表示中间的断点的状态

    展开全文
  • css3动画

    2018-12-10 15:25:40
    css3动画可以分为两种:过渡动画、关键帧动画 一、过渡动画(transition)  过渡动画就是从开始状态到结束状态这个过程中所产生的动画·。所谓的状态是指大小、位置、颜色、变形(transform)等这些属性。css过渡...

    css3动画可以分为两种:过渡动画、关键帧动画

    一、过渡动画(transition)

           过渡动画就是从开始状态到结束状态这个过程中所产生的动画·。所谓的状态是指大小、位置、颜色、变形(transform)等这些属性。css过渡动画只能定义首位两个状态,所以是最简单的一种动画。

           要想使用一个元素产生过渡动画,用transition属性定义动画的参数有:

           transition-property:规定对哪个属性进行过渡

           trsnsition-duration:定义过渡的时间,默认是0

           transition-timing-function:定义过渡动画的缓动效果,如淡入、淡出,默认是ease

           transition-delay:规定过渡效果的延迟时间,即在过了这个时间后才开始动画,默认是0

           .animate-div{
                    transition-property: width;/*对宽度进行过渡*/
                    transition-duration: 3s;/*过度时间为3s*/
                    transition-timing-function: ease;/*缓动效果为ease*/
                    transition-delay: 3s;/*延迟3s后才开始过渡*/
          }
         简写
         .animate-div{transition: width 3s ease 3s;}
         如是使用属性的默认值,则可以省略
         .animate-div{transition: width 3s;}
         相当于
         .animate-div{transition: width 3s ease 0;}
         如果想要同时使用多个属性,可以使用逗号隔开
         .animate-div{transition: width 3s, height 3s, background-color 3s;}

        使用transition属性只是规定了要如何去过渡,想要让动画发生,还得要有元素状态的改变。如何改变元素状态呢,即在css中给这个元素定义一个类(:hover等伪类也可以),这个类描述的是过渡动画结束时的状态。

    二、关键帧动画(keyframes)

            关键帧动画不同于过度动画只能定义首位两个状态,他可以定义多个状态,进而实现更复杂的动画效果。

            关键帧动画使用一个关键字@keyframes来定义动画。具体格式为:

           @keyframes 动画名称{

                      时间点{元素状态}

                      时间点{元素状态}

                      ......

            }

           参数:

           只要像这样把定义好的动画绑定到元素上,就能实现关键帧动画了,而不是像第一种过渡动画那样,需要一个状态的改变才能触发动画。

        

         为了兼容浏览器,还需加上各大浏览器的私有前缀

        

    展开全文
  • CSS3 动画

    千次阅读 2016-07-14 17:07:56
    1、CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。2、浏览器支持 ...

    1、CSS3 @keyframes 规则

       如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

    2、浏览器支持

       Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

       Chrome 和 Safari 需要前缀 -webkit-。

      注释:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。

    3、CSS3 动画

      当您在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:

      (1)、规定动画的名称

      (2)、规定动画的时长

      实例:把 "myfirst" 动画捆绑到 div 元素,时长:5 秒,背景颜色由红色逐渐变为黄色再变为红色。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
        div {
          width: 100px;
          height: 100px;
          background: red;
          animation: myfirst 5s;
          -moz-animation: myfirst 5s;
          /* Firefox */
          -webkit-animation: myfirst 5s;
          /* Safari and Chrome */
          -o-animation: myfirst 5s;
          /* Opera */
        }
    
        @keyframes myfirst {
          from {
            background: red;
          }
          to {
            background: yellow;
          }
        }
    
        @-moz-keyframes myfirst {
          /* Firefox */
          from {
            background: red;
          }
          to {
            background: yellow;
          }
        }
    
        @-webkit-keyframes myfirst {
          /* Safari and Chrome */
          from {
            background: red;
          }
          to {
            background: yellow;
          }
        }
    
        @-o-keyframes myfirst {
          /* Opera */
          from {
            background: red;
          }
          to {
            background: yellow;
          }
        }
      </style>
    </head>
    
    <body>
      <div></div>
      <p>
        <b>注释:</b>本例在 Internet Explorer 中无效。
      </p>
    </body>
    
    </html>

       注释:您必须定义动画的名称和时长。如果忽略时长,则动画不会允许,因为默认值是 0。

     4、什么是 CSS3 中的动画?

      动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。0% 是动画的开始,100% 是动画的完成。为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

    实例:当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变,同时改变位置。

    <!DOCTYPE html>
    <html>
    <head>
      <style>
        div {
          width: 100px;
          height: 100px;
          background: red;
          position: relative;
          animation: myfirst 5s;
          -moz-animation: myfirst 5s;
          /* Firefox */
          -webkit-animation: myfirst 5s;
          /* Safari and Chrome */
          -o-animation: myfirst 5s;
          /* Opera */
        }
        @keyframes myfirst {
          0% {
            background: red;
            left: 0px;
            top: 0px;
          }
          25% {
            background: yellow;
            left: 200px;
            top: 0px;
          }
          50% {
            background: blue;
            left: 200px;
            top: 200px;
          }
          75% {
            background: green;
            left: 0px;
            top: 200px;
          }
          100% {
            background: red;
            left: 0px;
            top: 0px;
          }
        }
    
        @-moz-keyframes myfirst
        /* Firefox */
          {
          0% {
            background: red;
            left: 0px;
            top: 0px;
          }
          25% {
            background: yellow;
            left: 200px;
            top: 0px;
          }
          50% {
            background: blue;
            left: 200px;
            top: 200px;
          }
          75% {
            background: green;
            left: 0px;
            top: 200px;
          }
          100% {
            background: red;
            left: 0px;
            top: 0px;
          }
        }
    
        @-webkit-keyframes myfirst
        /* Safari and Chrome */
          {
          0% {
            background: red;
            left: 0px;
            top: 0px;
          }
          25% {
            background: yellow;
            left: 200px;
            top: 0px;
          }
          50% {
            background: blue;
            left: 200px;
            top: 200px;
          }
          75% {
            background: green;
            left: 0px;
            top: 200px;
          }
          100% {
            background: red;
            left: 0px;
            top: 0px;
          }
        }
        @-o-keyframes myfirst
        /* Opera */
    
          {
          0% {
            background: red;
            left: 0px;
            top: 0px;
          }
          25% {
            background: yellow;
            left: 200px;
            top: 0px;
          }
          50% {
            background: blue;
            left: 200px;
            top: 200px;
          }
          75% {
            background: green;
            left: 0px;
            top: 200px;
          }
          100% {
            background: red;
            left: 0px;
            top: 0px;
          }
        }
      </style>
    </head>
    <body>
      <p>
        <b>注释:</b>本例在 Internet Explorer 中无效。
      </p>
      <div></div>
    </body>
    
    </html>        

     5、CSS3 动画属性

    (1)、@keyframes 规定动画

       目前浏览器都不支持 @keyframes 规则。Firefox 支持替代的 @-moz-keyframes 规则。Opera 支持替代的 @-o-keyframes 规则。Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。

       语法: @keyframes animationname {keyframes-selector {css-styles;}}

        animationname:必需。定义动画的名称。

        keyframes-selector:必需。动画时长的百分比。合法的值:0-100%,from(与 0% 相同)to(与 100% 相同)

        css-styles:必需。一个或多个合法的 CSS 样式属性。

    (2)、animation所有动画属性的简写属性,除了 animation-play-state 属性

       animation 属性是一个简写属性,用于设置六个动画属性:animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

        语法:animation: name duration timing-function delay iteration-count direction;

    (3)、animation-name规定 @keyframes 动画的名称

        语法:animation-name: keyframename|none;

         keyframename:规定需要绑定到选择器的 keyframe 的名称。

         none:规定无动画效果(可用于覆盖来自级联的动画)。

    (4)、animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0

        语法:animation-duration: time;

    (5)、animation-timing-function规定动画的速度曲线。默认是 "ease"

        语法:animation-timing-function: value;

         animation-timing-function 使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线。您能够在该函数中使用自己的值,也可以预定义的值:

         linear:动画从头到尾的速度是相同的。

         ease默认:动画以低速开始,然后加快,在结束前变慢。

         ease-in:动画以低速开始。

         ease-out:动画以低速结束。

         ease-in-out:动画以低速开始和结束。

         cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

    (6)、animation-delay 规定动画何时开始。默认是 0

        语法:animation-delay: time

    (7)、animation-iteration-count 规定动画被播放的次数。默认是 1

        语法:animation-iteration-count: n|infinite;

          n:定义动画播放次数的数值。

          infinite:规定动画应该无限次播放。

    (8)、animation-direction规定动画是否在下一周期逆向地播放

        语法:animation-direction: normal|alternate;

          normal:默认值。动画应该正常播放。

          alternate:动画应该轮流反向播放。

    (9)、animation-play-state 规定动画是否正在运行或暂停

        语法:animation-play-state: paused|running;

          paused:规定动画已暂停。

          running:规定动画正在播放。

    (10)、animation-fill-mode规定对象动画时间之外的状态

       语法:animation-fill-mode : none | forwards | backwards | both;

          none:不改变默认行为。

          forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。

          backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。

          both:向前和向后填充模式都被应用。

    实例:运行名为 myfirst 的动画,其中设置了所有动画属性:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <style>
        div {
          width: 100px;
          height: 100px;
          background: red;
          position: relative;
          animation: myfirst 5s linear 2s infinite alternate;
          /* Firefox: */
          -moz-animation: myfirst 5s linear 2s infinite alternate;
          /* Safari and Chrome: */
          -webkit-animation: myfirst 5s linear 2s infinite alternate;
          /* Opera: */
          -o-animation: myfirst 5s linear 2s infinite alternate;
        }
    
        @keyframes myfirst {
          0% {
            background: red;
            left: 0px;
            top: 0px;
          }
          25% {
            background: yellow;
            left: 200px;
            top: 0px;
          }
          50% {
            background: blue;
            left: 200px;
            top: 200px;
          }
          75% {
            background: green;
            left: 0px;
            top: 200px;
          }
          100% {
            background: red;
            left: 0px;
            top: 0px;
          }
        }
    
        @-moz-keyframes myfirst { /* Firefox */
          0% {
            background: red;
            left: 0px;
            top: 0px;
          }
          25% {
            background: yellow;
            left: 200px;
            top: 0px;
          }
          50% {
            background: blue;
            left: 200px;
            top: 200px;
          }
          75% {
            background: green;
            left: 0px;
            top: 200px;
          }
          100% {
            background: red;
            left: 0px;
            top: 0px;
          }
        }
    
        @-webkit-keyframes myfirst { /* Safari and Chrome */
          0% {
            background: red;
            left: 0px;
            top: 0px;
          }
          25% {
            background: yellow;
            left: 200px;
            top: 0px;
          }
          50% {
            background: blue;
            left: 200px;
            top: 200px;
          }
          75% {
            background: green;
            left: 0px;
            top: 200px;
          }
          100% {
            background: red;
            left: 0px;
            top: 0px;
          }
        }
    
        @-o-keyframes myfirst {  /* Opera */
          0% {
            background: red;
            left: 0px;
            top: 0px;
          }
          25% {
            background: yellow;
            left: 200px;
            top: 0px;
          }
          50% {
            background: blue;
            left: 200px;
            top: 200px;
          }
          75% {
            background: green;
            left: 0px;
            top: 200px;
          }
          100% {
            background: red;
            left: 0px;
            top: 0px;
          }
        }
      </style>
    </head>
    
    <body>
      <p>
        <b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
      <div></div>
    </body>
    </html>

    6、手机APP启动界面动画实例

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>Hello MUI</title>
      <meta name="viewport"
            content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
      <meta name="apple-mobile-web-app-capable"
            content="yes">
      <meta name="apple-mobile-web-app-status-bar-style"
            content="black">
      <link rel="stylesheet"
            href="../css/mui.min.css">
      <style>
        #close {
          position: absolute;
          width: 160px;
          left: 50%;
          margin-left: -80px;
          bottom: 15%;
          padding: 10px;
          color: #fff;
          border-color: #fff;
        }
    
        .item-logo {
          width: 100%;
          height: 100%;
          position: relative;
        }
    
        .item-logo a {
          width: 200px;
          height: 200px;
          display: block;
          border: 1px solid #FFFFFF;
          border-color: rgba(255, 255, 255, 0.5);
          text-align: center;
          line-height: 200px;
          border-radius: 50%;
          font-size: 40px;
          color: #fff;
          position: absolute;
          top: 15%;
          left: 50%;
          margin-left: -100px;
        }
    
        .animate {
          position: absolute;
          left: 0;
          bottom: 15%;
          width: 100%;
          color: #fff;
          display: -moz-box;
        }
    
        .animate h2 {
          text-align: center;
          margin-bottom: 20px;
        }
    
        .animate li {
          width: 50%;
          height: 30px;
          line-height: 30px;
          list-style: none;
          font-size: 16px;
          text-align: right;
        }
    
        .animate li:nth-child(3) {
          text-align: left;
          float: right;
        }
    
        .animated {
          -webkit-animation-duration: 1s;
          -webkit-animation-play-state: paused;
          -webkit-animation-fill-mode: both;
        }
    
        .guide-show .bounceInDown {
          -webkit-animation-name: bounceInDown;
          -webkit-animation-play-state: running;
          -webkit-animation-delay: 1s;
          display: block;
        }
    
        .guide-show .bounceInLeft {
          -webkit-animation-name: bounceInLeft;
          display: block;
          -webkit-animation-play-state: running;
        }
    
        .guide-show .bounceInRight {
          -webkit-animation-name: bounceInRight;
          display: block;
          -webkit-animation-play-state: running;
          -webkit-animation-delay: 0.5s;
        }
    
        @-webkit-keyframes bounceInDown {
          0%,
          60%,
          75%,
          90%,
          100% {
            -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
          }
          0% {
            opacity: 0;
            -webkit-transform: translate3d(0, -3000px, 0);
            transform: translate3d(0, -3000px, 0);
          }
          60% {
            opacity: 1;
            -webkit-transform: translate3d(0, 25px, 0);
            transform: translate3d(0, 25px, 0);
          }
          75% {
            -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0);
          }
          90% {
            -webkit-transform: translate3d(0, 3px, 0);
            transform: translate3d(0, 3px, 0);
          }
          100% {
            -webkit-transform: none;
            transform: none;
          }
        }
    
        @-webkit-keyframes bounceInLeft {
          0%,
          60%,
          75%,
          90%,
          100% {
            -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
          }
          0% {
            opacity: 0;
            -webkit-transform: translate3d(-3000px, 0, 0);
            transform: translate3d(-3000px, 0, 0);
          }
          60% {
            opacity: 1;
            -webkit-transform: translate3d(25px, 0, 0);
            transform: translate3d(25px, 0, 0);
          }
          75% {
            -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
          }
          90% {
            -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
          }
          100% {
            -webkit-transform: none;
            transform: none;
          }
        }
    
        @-webkit-keyframes bounceInRight {
          0%,
          60%,
          75%,
          90%,
          100% {
            -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
          }
          0% {
            opacity: 0;
            -webkit-transform: translate3d(3000px, 0, 0);
            transform: translate3d(3000px, 0, 0);
          }
          60% {
            opacity: 1;
            -webkit-transform: translate3d(-25px, 0, 0);
            transform: translate3d(-25px, 0, 0);
          }
          75% {
            -webkit-transform: translate3d(10px, 0, 0);
            transform: translate3d(10px, 0, 0);
          }
          90% {
            -webkit-transform: translate3d(-5px, 0, 0);
            transform: translate3d(-5px, 0, 0);
          }
          100% {
            -webkit-transform: none;
            transform: none;
          }
        }
      </style>
    </head>
    
    <body>
      <div id="slider"
           class="mui-slider mui-fullscreen"
           style="background-color: black;">
        <div class="mui-slider-group">
          <!-- 第一张 -->
          <div class="mui-slider-item">
            <div class="item-logo"
                 style="background-color: #D74B28">
              <a href="#"> MUI </a>
              <div class="animate guide-show">
                <h2 class="animated bounceInDown">小巧高能</h2>
                <li class="animated bounceInLeft">几十K的JS和CSS</li>
                <li class="animated bounceInRight">上百种控件样式和模板</li>
              </div>
            </div>
          </div>
          <!-- 第二张 -->
          <div class="mui-slider-item">
            <div class="item-logo"
                 style="background-color: #02C1ED;">
              <a href="#"> MUI </a>
              <div id="tips-2"
                   class="animate mui-hidden">
                <h2 class="animated bounceInDown">原生UI</h2>
                <li class="animated bounceInLeft">以iOS原生UI为基础</li>
                <li class="animated bounceInRight">补充Android特有样式</li>
              </div>
            </div>
          </div>
          <!-- 第三张 -->
          <div class="mui-slider-item">
            <div class="item-logo"
                 style="background-color: #67C962;">
              <a href="#"> MUI </a>
              <div id="tips-3"
                   class="animate mui-hidden">
                <h2 class="animated bounceInDown">流畅体验</h2>
                <li class="animated bounceInLeft">下拉刷新、转场动画</li>
                <li class="animated bounceInRight">整个世界都流畅了</li>
              </div>
            </div>
          </div>
          <!-- 第四张 -->
          <div class="mui-slider-item">
            <div class="item-logo"
                 style="background-color: #FCD208;">
              <a href="#"> MUI </a>
              <div class="animate">
                <button id='close'
                        class="mui-btn mui-btn-warning mui-btn-outlined">立即体验</button>
              </div>
            </div>
          </div>
        </div>
        <div class="mui-slider-indicator">
          <div class="mui-indicator mui-active"></div>
          <div class="mui-indicator"></div>
          <div class="mui-indicator"></div>
          <div class="mui-indicator"></div>
        </div>
      </div>
      <script src="../js/mui.min.js"></script>
      <script>
        mui.back = function () { };
        mui.plusReady(function () {
          if (mui.os.ios) {
            plus.navigator.setFullscreen(true);
          }
          plus.navigator.closeSplashscreen();
        });
        //立即体验按钮点击事件
        document.getElementById("close").addEventListener('tap', function (event) {
          plus.storage.setItem("lauchFlag", "true");
          plus.navigator.setFullscreen(false);
          plus.webview.currentWebview().close();
        }, false);
        //图片切换时,触发动画
        document.querySelector('.mui-slider').addEventListener('slide', function (event) {
          //注意slideNumber是从0开始的;
          var index = event.detail.slideNumber + 1;
          if (index == 2 || index == 3) {
            var item = document.getElementById("tips-" + index);
            if (item.classList.contains("mui-hidden")) {
              item.classList.remove("mui-hidden");
              item.classList.add("guide-show");
            }
          }
        });
      </script> </body>
    
    </html>
    


                 


               

     

     

     

     

     

    展开全文
  • CSS 3动画

    千次阅读 2017-04-14 14:13:02
    .rotation { visibility: visible; -webkit-animation: rotation 0.6s forwards; -moz-animation: rotation 0.6s forwards; animation: rotation 0.6s forwards;
            .rotation {
                visibility: visible;
                -webkit-animation: rotation 0.6s forwards;
                -moz-animation: rotation 0.6s forwards;
                animation: rotation 0.6s forwards;
            }
    
            @-webkit-keyframes rotation {
                0% {
                    -webkit-transform: rotate(0deg);
                }
                100% {
                    -webkit-transform: rotate(90deg);
                }
            }

    变化函数:

    旋转九十度
    rotate(90deg)

    Y轴移动100px
    translateY(100px)

    X轴移动100px
    translateX(100px)

    x轴缩放1.2倍,y轴缩放0.8倍
    scale(1.2,0.8)

    展开全文
  • 其实我做css3动画也没有多久,这篇文章目标人群是css3动画的新手,不喜勿喷。分类目前我接触到的css3动画有2类:一种是transition的,另一种是@keyframes的。两者的区别就是,transition的动画表达是从一种状态到另...
  • animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,856
精华内容 10,342
关键字:

css3动画