css3 animation

一.animation属性

1.animation-name:@keyframes后面跟着的名称.

2.animation-duration:动画周期持续时间。单位秒s或毫秒ms

3.animation-timing-funtion:定义动画播放的曲线方式，默认为ease;可选:|linear|ease-in|ease-out|ease-in-out| 参数设置类似transition-timing-function

4.animation-delay:指动画延时执行时间。单位秒s或毫秒ms.

5.animation-iteration-count:顾名思意：“动画迭代次数”。默认就1次，当然，我们可以设置2次，3次，4次，…这辈子撸的数目次。如果撸的次数实在太壮观，建议使用infinite关键字，表示无限、无穷无尽，撸到天荒地老，铁杵成针！

6.animation-direction:指动画时间轴上帧前进的方向。默认为normal,表示一路向前，往前播放。另外可选值alternate，表示动画往前播放完了之后，然后再倒带，倒带到头了再往后播放，来来回回~~

7.animation-fill-mode:顾名思意，“动画填充模式”，啥子意思呢？我们装修时候，都见过铺地面砖或地板的，地砖与地砖时间只有缝隙的，我们需要填充，如何个填充法，我们就称之为“填充模式”。属性规定动画在播放之前或之后，其动画效果是否可见。|none|forwards|backwards|both; //botn 向前和向后填充模式都被应用。

8.animation-play-state:动画运行状态，属性为：running（默认）以及paused. 这个什么时候有用的，使用animation实现视频播放效果的时候。视频播放？没错，诸位out了吧，并不是HTML5 video才可以玩转视频哦~~不多讲，啦啦啦啦啦~~

animation缩写:animation: example 5s linear 2s infinite alternate;

1.简单的缩放扩展动画(animation水平弹性缩放变色动画)

.test{width:100px;height:100px;background:red;margin:40px auto;}
.test:hover{
    -webkit-animation-name: resize;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: 4;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
    /*简写-webkit-animate:resize 1.5s ease-in-out 4 alternate*/   
}
@-webkit-keyframes resize{
    0%{padding:0;}
    50%{padding:0 20px;background:blue;}
    100%{padding:0 100px;background:yellow;}
}

 

2.animation下的外发光动画

.test{width:320px;height:150px;margin:0 auto;width:320px;height:150px;padding:3px;border:1px solid #beceeb;background-color:#fff;-webkit-box-shadow: 0 0 8px red;}
.test:hover{
    -webkit-animation-name: shadow;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
   /*-webkit-animation:shadow 1s ease-in-out infinite alternate*/
}
@-webkit-keyframes shadow{
    0%{-webkit-box-shadow: 0 0 12px red;}
    100%{-webkit-box-shadow: 0 0 12px blue}
} 

 

3.图片无限自动fade谈入谈出效果

.test{width:326px;height:156px;margin:0 auto;position:relative;padding:3px;background:red;}
.test img{width:320px;height:150px;position:absolute;left:3px;top:3px;}
.test img:hover{
    -webkit-animation-name:fade;
    -webkit-animation-duration:12s;
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
    /*简写-webkit-animation:fade 12s ease-in-out infinite alternate;*/
}
@-webkit-keyframes fade{
    0%{opacity:1;}
    25%{opacity:0;}
    75%{opacity:1;}
    100%{opacity:0;}
}

 

4.图片轮转缩放显示动画(用transition与transform给合)

.anim_image{cursor:pointer;-webkit-transition:all 1s ease-in-out;}
.anim_image_top{position:absolute;-webkit-transform:scale(0,0);opacity:0;}
.test:hover .anim_image_top{
    opacity:1;
    -webkit-transform:scale(1,1);
    -webkit-transform-origin:top right;
}
.test:hover .anim_image_bottom{
    -webkit-transform:scale(0,0);
    -webkit-transform-origin:bottom left;
}

 

5.平滑选项卡切换

HTML代码

<div class="trans_box">
    <div id="transImageBox" class="trans_image_box">
        <img class="trans_image" src="/Images/banner1.jpg" />
        <img class="trans_image" src="/Images/banner2.jpg" />
        <img class="trans_image" src="/Images/banner3.jpg" />
    </div>
    <div id="transImageTrigger" class="trans_image_trigger">
        <a href="#1">图片1</a>
        <a href="#2">图片2</a>
        <a href="#3">图片3</a>
    </div>
</div>
                    

CSS代码

.trans_box{width:320px;height:180px;overflow:hidden;position:relative;}
.trans_image_box{position:absolute;left:0px;width:2000px;height:150px;-webkit-transition:all 1s ease-in-out;}
.trans_image{width:320px;height:150px;float:left;}
.trans_image_trigger{width:100%;text-align:center;position:absolute;bottom:0px;}
.trans_image_trigger a{margin:0 10px;}

JavaScript代码

(function(){
    var $ = function(id){
        return document.getElementById(id);
    }
    var oBox = $("transImageBox"),
        oTrigger = $("transImageTrigger").getElementsByTagName("a"),
        lTrigger = oTrigger.length;

    if(oBox && lTrigger){
        for(var i = 0; i < lTrigger; i++){
            oTrigger[i].onclick = function(){
                var index = Number(this.href.replace(/.*#/g,"")) || 1;  //.匹配除换行符以外的任意字符  *重复任意次(0次也算)  ,然后替换为空,取得数字
                oBox.style.left = (1 - index)*320 +"px";
                return false;
            }
        }
    }
})();