zoukankan      html  css  js  c++  java
  • css3-动画(animation)

    css3-动画(animation):

    具有以下属性:

    1、animation-name 自定义动画名称
    2、animation-duration 动画指定需要多少秒或毫秒完成,默认值是0;
    3、animation-timing-function 动画的时间曲线,linear 匀速, ease 先慢后快,结束前变慢 。
    4、animation-delay 动画在启动前的延迟间隔,默认是0
    5、animation-iteration-count 动画的播放次数,默认是1
    6、animation-direction 是否轮流反向播放动画
    7、animation-play-state 动画是否正在运行或已暂停。 值:paused 指定暂停动画 ; running 指定正在运行的动画,默认。

    实例:本demo以平移(translate)为例说明动画的整个过程

    html:

    <body>
    		<div class="warp">
    			
    		</div>
    </body>
    

    css:

    .warp{
    	    height: 100px;
    	      100px;
    	     border: 1px solid #eee;
    			
                animation-name:moves;
                animation-direction:alternate;
                animation-delay: 0.2s;
                animation-duration: 5s;
                animation-play-state: paused;
                animation-iteration-count: 3;
               /*以上可以简写成:*/
               animation: moves 5s linear 0.2s 3;
    }
    
    @keyframes moves{                           /*动画名称自定义*/
    	10%{                                    /*时间点可以任意,10%表示当时间进行到10%是元素要达到的状态*/
    		transform: translate(100px,0);       
    		-ms-transform:translate(100px,0);	 /*IE 9*/ 
    		-moz-transform:translate(100px,0); 	/* Firefox */
    		-webkit-transform:translate(100px,0); /* Safari 和 Chrome */
    		-o-transform:translate(100px,0); 	/* Opera */
    	}
    	30%{                                    /*时间点可以任意*/
    		transform: translate(100px,100px);
    		-ms-transform:translate(100px,100px);	 /*IE 9*/ 
    		-moz-transform:translate(100px,100px); 	/* Firefox */
    		-webkit-transform:translate(100px,100px); /* Safari 和 Chrome */
    		-o-transform:translate(100px,100px); 	/* Opera */
    	}
    	60%{                                       /*时间点可以任意*/
    		transform: translate(0,100px);
    		-ms-transform:translate(0,100px);	 /*IE 9*/ 
    		-moz-transform:translate(0,100px); 	/* Firefox */
    		-webkit-transform:translate(0,100px); /* Safari 和 Chrome */
    		-o-transform:translate(0,100px); 	/* Opera */
    	}
    	100%{                                /*时间点可以任意*/
    		transform: translate(0,0);
    		-ms-transform:translate(0,0);	 /*IE 9*/ 
    		-moz-transform:translate(0,0); 	/* Firefox */
    		-webkit-transform:translate(0,0); /* Safari 和 Chrome */
    		-o-transform:translate(0,0); 	/* Opera */
    	}
    }
    

      

      

  • 相关阅读:
    【SQLite操作】SQLite下载使用教程
    【VS】编译/生成解决方案时错误 未能写入输出文件“...objDebugxxx.exe”--“另一个程序正在使用此文件,进程无法访问
    Webstorm 快速补全
    JS 之循环 应用案例1
    elementUI的el-input和el-select宽度 一致
    SpringMVC 参数中接收之一 List
    VUE 之_this.da 和 this
    CSS 格式 设置标签间距 和 input slot
    Spring最简单构建一个后台{msg:"登录成功",code:200,data:null}
    VUE SpringCloud 跨域资源共享 CORS 详解
  • 原文地址:https://www.cnblogs.com/hgdzjp/p/9450335.html
Copyright © 2011-2022 走看看