zoukankan      html  css  js  c++  java
  • CSS3实现动画的两种方式

    1、设置transition设置过渡,添加transform设置形状,形成动画效果,如下:

    .divadd {
    	 transition: All 0.4s ease-in-out;
             -webkit-transition: All 0.4s ease-in-out;
             -moz-transition: All 0.4s ease-in-out;
             -o-transition: All 0.4s ease-in-out;
    
    	 transform:rotate(360deg);
    	-ms-transform:rotate(360deg); /* IE 9 */
    	-webkit-transform:rotate(360deg); /* Safari and Chrome */
    }
    

      此种方式比较小众,不易控制

    2、添加animation属性,设置动画效果,如下:

    .a1 {
    	position: absolute;
    	animation: a1 3s;
    	opacity: 0
    }
    @keyframes a1 {
    	0% {left: 10px;opacity: 0}
    	30% {left: 60px;background-color: pink;font-size:23px;opacity: 1}
    	90% {left: 100px;background-color: red;opacity: 1}
    	100% {left: 10px;opacity: 0}
    } 

     

    以上百分比后的方括号内可以添加各种属性值,比如transform ratote、left。。。。。。添加left top等定位不要忘记设置position absolute。

    所有属性有:

        animation-name: myfirst;  //动画名称,用于animation引用
        animation-duration: 5s;  //动画时长,
        animation-timing-function: linear;
        animation-delay: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-play-state: running;
    animation-fill-mode
    设置动画结束后的状态
    none:默认值。不设置对象动画之外的状态,DOM未进行动画前状态
    forwards:设置对象状态为动画结束时的状态,100%或to时,当设置animation-direcdtion为reverse时动画结束后显示为keyframes第一帧
    backwards:设置对象状态为动画开始时的状态,(测试显示DOM未进行动画前状态)
    both:设置对象状态为动画结束或开始的状态,结束时状态优先


  • 相关阅读:
    【剑指Offer】49把字符串转换成整数
    【剑指Offer】48不用加减乘除做加法
    【剑指Offer】47求1+2+3+...+n
    判断两个线段是否相交
    EM算法--原理
    理解KMP算法
    阿里校招笔试的一道逻辑题
    线性拟合之最小二乘方法和最小距离方法
    Oracle Net Manager 服务命名配置以及用PL/SQL 登陆数据库
    正则表达式总结
  • 原文地址:https://www.cnblogs.com/dontes/p/7383504.html
Copyright © 2011-2022 走看看