animate以及animation随记

animation

animation-name 需要绑定到选择器的 keyframe 名称

---

animation-duration 完成动画所需要的时间

---

animation-delay 设置延长时间

---

animation-timing-function 动画的运动速度

---

• linear 动画从头到尾的速度是相同的。
• ease 默认。动画以低速开始，然后加快，在结束前变慢。
• ease-in 动画以低速开始。
• ease-out 动画以低速结束。
• ease-in-out 动画以低速开始和结束。
• cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-iteration-count 动画播放的次数

---

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

animation-direction 轮流反向播放动画

---

• normal 默认值。动画应该正常播放。
• alternate 动画应该轮流反向播放。

animation放大之后消失

<!-- 光圈 -->
<img src="../common/img/p2/quan_01.png" class="w100 halo-01 po-ab ani_scale1">
<img src="../common/img/p2/quan_02.png" class="w100 halo-02 po-ab ani_scale2">
<img src="../common/img/p2/quan_03.png" class="w100 halo-03 po-ab ani_scale3">
/* halo 光圈 */
.halo-01 {width: 1.2rem;height: .6rem;top: 62%;left: 44%;}
.halo-02 {width: 3.3rem;height: 1rem;top: 62%;left: 30%;}
.halo-03 {width: 5.3rem;height: 1.4rem;top: 62%;left: 16%;}

.ani_scale1{
	-webkit-animation: scale 4s linear infinite;
	animation: scale 4s linear infinite;
}
.ani_scale2 {
    -webkit-animation: scale2 4s linear infinite 1s;
    animation: scale2 4s linear infinite 1s;
}

.ani_scale3 {
    -webkit-animation: scale 4s linear infinite 2s;
    animation: scale 4s linear infinite 2s;
}

@keyframes scale{
	0% {
	    opacity: 1;
	    -webkit-transform: scale(1);
	}
	50% {
	    opacity: 0.5;
	    -webkit-transform: scale(1.5);
	}
	100% {
	    opacity: 0;
	    -webkit-transform: scale(1.8);
	}
}
@keyframes scale2 {
    0% {
        opacity: 1;
        -webkit-transform: scale(0.7);
    }
    50% {
        opacity: 0.5;
        -webkit-transform: scale(1.2);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.5);
    }
}

点击向下滑动

// 胖虎
	$(".nav_btn02").on('mouseenter',function(){
		console.log("111")
		$(".nav_btn02").stop().attr("src","img/btn02_h.png");
		$('.lineL06').stop().animate({"height":80}, 600);
		// $('.nav_btn02').stop().css({"width": 200}, 600);
		$('.nav_btn02').stop().animate({"top":75}, 600).css({"height": 178}, 600);
		
	})
	$(".nav_btn02").on('mouseleave',function(){
		console.log("222")
		$(".nav_btn02").stop().attr("src","img/btn02.png");
		$('.lineL06').stop().animate({"height":35}, 600);
		$('.nav_btn02').stop().animate({"top":25}, 600).css({"height": 158}, 600);
	})

//上下浮动效果

/* 上下移动 */
.animate-bounce-down{
	margin-top: -5px;
	-webkit-animation: bounce-down 3s linear infinite;
	animation: bounce-down 3s linear infinite;
}
@-webkit-keyframes bounce-down {
 25% {-webkit-transform: translateY(-2px);}
 50%, 100% {-webkit-transform: translateY(0);}
 75% {-webkit-transform: translateY(2px);}
}

@keyframes bounce-down {
 25% {transform: translateY(-2px);}
 50%, 100% {transform: translateY(0);}
 75% {transform: translateY(2px);}
}

.animate-bounce-up{
	margin-top: -10px;
	-webkit-animation: bounce-up 1.4s linear infinite;animation: bounce-up 1.4s linear infinite;}
@-webkit-keyframes bounce-up {
 25% {-webkit-transform: translateY(10px);}
 50%, 100% {-webkit-transform: translateY(0);}
 75% {-webkit-transform: translateY(-5px);}
}

@keyframes bounce-up {
 25% {transform: translateY(10px);}
 50%, 100% {transform: translateY(0);}
 75% {transform: translateY(-5px);}
}

<div class="nav_movie animate-bounce-down"></div>