css3动画集合

1.div由短变长

​
.red_banner_line{
	width: 20px;height: 4px;background: #EA0000;float: right;
	transition:width .5s;float: right;
	-moz-transition:width .5s; /* Firefox 4 */
	-webkit-transition:width .5s; /* Safari and Chrome */
	-o-transition:width .5s; /* Opera */
}
.lunbo_list_this .red_banner_line{padding-left:40px;width: 100%;}
//设置宽度

​

2.利用伪类画下划线

.menubar_cont .top_bar{
	float: left;font-size: 20px;color: #793f26;padding: 10px 0px;margin: 0px 35px;cursor: pointer;
	position: relative;transition: all .3s;
    -webkit-transition: all .3s;
}
.top_bar:after{
	content: "";
    width: 0;
 	height:4px;
 	background:#EA0000;
 	position: absolute;
 	top: calc(100% - 4px);
 	left: 0%;
 	transition: all .2s;
    -webkit-transition: all .2s;
}
 
.top_bar:hover:after{
    left: 0%;
    width: 100%;
}
.top_bar_cont:after{ 
    content: '';
    top: auto;
    bottom: 0;
    width: 100%;
}

3.图片缩放

.six_cont img{
	-webkit-transform: scale(1,1);
	-moz-transform: scale(1,1);
	transform: scale(1,1);
	transition: all 0.3s;
	-moz-transition: all 0.3s;
	-webkit-transition: all 0.3s;
}
.six_cont:hover img{
	-webkit-transform: scale(1.1,1.1);
	-moz-transform: scale(1.1,1.1);
	transform: scale(1.1,1.1);
	 
}

4.div位置移动

.six_cont_txt{
	float: left;width: 100%;text-align: center;position: absolute;bottom: -40px;
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
}
.six_cont:hover .six_cont_txt{
	bottom: 20px;
}

5.旋转

transform:rotate(180deg);

 

6.声明一个函数动画

.footer_center ul li a:hover .fmenu_line{
	position:relative;
	animation:myfooterwidth 0.5s infinite;
	-webkit-animation:myfooterwidth 0.5s infinite; /*Safari and Chrome*/
	animation-iteration-count:1;/*动画只执行一次*/
	-webkit-animation-iteration-count:1;
}

@keyframes myfooterwidth
{
	from {width:0px;}
	to {width:20px;}
}

@-webkit-keyframes myfooterwidth  
{
	from {width:0px;}
	to {width:20px;}
}

后期更新中，不断学习