常用css3动画

• 2017-11-07
• 2252 View

css3翻转动画效果

.fw_ul li:hover .fw_img {
transform: rotateY(360deg);
-ms-transform: rotateY(360deg); /* IE 9 */
-webkit-transform: rotateY(360deg); /* Safari and Chrome */
}

css3缩放动画

#fh5co-about-us .item-block p.imgs img {
transition: transform 1s ease 0s;
transform: scale(1);
width: 100%;
display: block;
overflow: hidden
}
#fh5co-about-us .item-block p.imgs img:hover {
transition: transform 1s ease 0s;
transform: scale(1.1);
}

飞入动画

.fadeInDownBig {
-webkit-animation-name: fadeInDownBig;
animation-name: fadeInDownBig
}
@-webkit-keyframes fadeInLeft {
0% {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInLeft {
0% {
opacity:0;
-webkit-transform:translate3d(-100%, 0, 0);
transform:translate3d(-100%, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft
}
@-webkit-keyframes fadeInLeftBig {
0% {
opacity:0;
-webkit-transform:translate3d(-2000px, 0, 0);
transform:translate3d(-2000px, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInLeftBig {
0% {
opacity:0;
-webkit-transform:translate3d(-2000px, 0, 0);
transform:translate3d(-2000px, 0, 0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.fadeInLeftBig {
-webkit-animation-name: fadeInLeftBig;
animation-name: fadeInLeftBig
}

隐藏渐变

.link-name-default {
position: absolute;
left: 25px;
bottom: 25px;
opacity: 1;
filter: alpha(opacity=100);
border-bottom: 1px solid #fff;
padding-bottom: 5px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.link-name-default h3 {
font-size: 20px;
font-weight: normal;
color: #fff;
line-height: normal;
}
.link-setion-text {
display: block;
width: 100%;
position: absolute;
top: 50%;
left: 0;
z-index: 10;
color: #fff;
text-align: center;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.link-setion-text h3 {
margin: 0 20px 15px;
margin-top: -25px;
font-size: 22px;
font-weight: normal;
color: #fff;
line-height: normal;
transition: all 0.35s ease-out;
-moz-transition: all 0.35s ease-out;
-o-transition: all 0.35s ease-out;
-webkit-transition: all 0.35s ease-out;
-ms-transition: all 0.35s ease-out;
}
.link-setion-text p {
margin: 0 20px 15px;
margin-top: -55px;
font-size: 13px;
font-weight: normal;
color: #fff;
line-height: normal;
transition: all 0.35s ease-out;
-moz-transition: all 0.35s ease-out;
-o-transition: all 0.35s ease-out;
-webkit-transition: all 0.35s ease-out;
-ms-transition: all 0.35s ease-out;
}
.link-setion-text .link-more {
display: inline-block;
*display:inline;
*zoom:1;
margin-top: 15px;
padding: 3px 15px;
border: 1px solid #fff;
font-size: 13px;
}
.link-setion .opacity-overlay {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
background: #004f99;
opacity: 0;
filter: alpha(opacity=0);
_height:expression( (this.parentElement.clientHeight) +'px');
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.link-setion a:hover .link-name-default {
opacity: 0;
filter: alpha(opacity=0);
}
.link-setion a:hover .link-setion-text {
opacity: 1;
filter: alpha(opacity=100);
}
.link-setion a:hover .link-setion-text h3 {
margin-top: 0px;
}
.link-setion a:hover .link-setion-text p {
margin-top: 0px;
}
.link-setion a:hover .opacity-overlay {
opacity: 0.8;
filter: alpha(opacity=80);
}

头部自动缩小

.header.fixed {position:fixed; transition-duration:0.6s; width:100%; z-index:99; opacity:0.9;}


.top-box {height:100px; transition-duration:0.8s;}


.header.fixed .top-box {height:60px; transition-duration:0.6s;}


.top-box,.container,.mobile-nav .menu,.foot,.foot-ad,.slidershow {width:1200px; margin:0 auto; position:relative;}


.logo {float:left; width:250px; height:60px; margin-top:20px; display:inline; transition-duration:1s; -moz-animation:fadeInLeft 1s ease both; -webkit-animation:fadeInLeft 1s ease both; -o-animation:fadeInLeft 1s ease both; -ms-animation:fadeInLeft 1s ease both; animation:fadeInLeft 1s ease both;}


.logo a {display:block;}


.logo img {display:block; width:auto; max-width:100%; height:auto;}

$(window).scroll(function(){



		var $top = $(window).scrollTop();



		if($top > 0){



			$('.header').addClass('fixed');



			$('.site-header').addClass('fixed');



		}else{



			$('.header').removeClass('fixed');



			$('.site-header').removeClass('fixed');	



		}



		var $sideH = $('.sidebar').height() + $('.sidebar').offset().top;



		var $scrollT = $top + $('#scroll').height();



		var $footT = $('.footer').offset().top;



		if($top > $sideH){



			if($scrollT > $footT){



				$('#scroll').addClass('stop').removeClass('scroll');



			}else{



				$('#scroll').addClass('scroll').removeClass('stop');



			}



		}else{



			$('#scroll').removeClass('scroll').removeClass('stop');



		}	



	});