zoukankan      html  css  js  c++  java
  • CSS3 动画

    1

    @keyframes	             规定动画。

    animation-name: change; /*规定 @keyframes 动画的名称。*/
    animation-duration:2s; /*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/
    animation-timing-function:ease; /*规定动画的速度曲线。默认是 "ease"。*/
    animation-delay:0s; /*规定动画何时开始。默认是 0s。*/
    animation-iteration-count:1; /*规定动画被播放的次数。默认是 1。【 infinite 无限次】*/
    animation-direction:alternate; /*规定动画是否在下一周期逆向地播放。默认是 "normal"。【alternate 逆向循环】*/
    animation-play-state:running; /*规定动画是否正在运行或暂停。默认是 "running"。【可以设置添加了动画的css样式设置动画停止 播放】 <br>*/
    animation-fill-mode:backwards; /*规定对象动画时间之外的状态。动画执行完的转态 【回到初始转态backwards 保持最后的转态forwards】*/
    animation-timing-function:linear; /*从一个动画到下一个动画时间是均匀变化的*/

    ============================例子=================================================
    定义动画
    @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;}
    }
    使用动画
    div
    {
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    }
    

      1:动画的停止与播放

      1.1html

    <div style="200px;height:200px;background-color:#0094ff">
            <img src="img/cc.png" class="myImg" id="img1"/>
            <img src="img/cc.png" class="myImg1" />
            <img src="img/cc.png" class="myImg" />
            <img src="img/cc.png" class="myImg1" />
            <img src="img/cc.png" class="myImg" />
            <img src="img/cc.png" class="myImg1" />
            
        </div>
    

      1.2 js

    <script type="text/javascript">
    
            $(function () {
                $("#img1").mouseover(function () {             
                    $(this).css({ "animation-play-state": "paused" });//鼠标移动上此元素是就将动画停止
                }).mouseout(function () {
                    $(this).css({ "animation-play-state": "running" });//鼠标移开时重新开始动画
                })
            })
        </script>
    

      1.3 CSS

     <style type="text/css">
            @keyframes MyAnimation{
                 0% {top:0px;left:0px;}
                10% {top:20px;left:0px;}
                20% {top:40px;left:0px;}
                30% {top:60px;left:0px;}
                40% {top:80px;left:0px;}
                50% {top:100px;left:0px;}
                60% {top:120px;left:0px;}
                70% {top:140px;left:0px;}
                80% {top:160px;left:0px;}
                90% {top:180px;left:0px;}
                100% {top:200px;left:0px;}
            }
             @keyframes MyAnimation1{
                 100% {top:50px;left:0px;}
                90% {top:20px;left:0px;}
                80% {top:40px;left:0px;}
                70% {top:60px;left:0px;}
                60% {top:80px;left:0px;}
                50% {top:100px;left:0px;}
                40% {top:120px;left:0px;}
                30% {top:140px;left:0px;}
                20% {top:160px;left:0px;}
                10% {top:180px;left:0px;}
                0% {top:200px;left:0px;}
            }
            .myImg {
            position:relative;
            animation-name: MyAnimation;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 0s;
            animation-iteration-count: infinite;
            animation-direction: normal;
            animation-play-state: running;
            }
            .myImg1 {
            position:relative;
            animation-name: MyAnimation1;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 0s;
            animation-iteration-count: 1;
            animation-direction: normal;
            animation-play-state:running;
            animation-fill-mode:forwards;
            }
           
        </style>
    

      抛物线设置:

    http://cubic-bezier.com/#.05,.87,0,1.59

    animation-timing-function: cubic-bezier(.05, .87, 0, 1.59)

  • 相关阅读:
    LeetCode 32. 最长有效括号(Longest Valid Parentheses)
    LeetCode 141. 环形链表(Linked List Cycle)
    LeetCode 160. 相交链表(Intersection of Two Linked Lists)
    LeetCode 112. 路径总和(Path Sum)
    LeetCode 124. 二叉树中的最大路径和(Binary Tree Maximum Path Sum)
    LightGBM新特性总结
    sql service 事务与锁
    C#泛型实例详解
    C# 中的委托和事件(详解)
    C# DateTime日期格式化
  • 原文地址:https://www.cnblogs.com/lgjc/p/5849806.html
Copyright © 2011-2022 走看看