HTML+CSS实现淡入淡出动画 ：animation-name

1、CSS3 animation-name 属性为 @keyframes 动画指定一个名称

2、举例实现一：

设置一个红色方块从左边移动到右边，完成时间为5秒

html代码如下：

<div class="fangkuai"></div>

css代码如下：

div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation-name:mymove;
	animation-duration:5s;
	/* Safari and Chrome */
	-webkit-animation-name:mymove;
	-webkit-animation-duration:5s;
}
@keyframes mymove
{
	from {left:0px;}
	to {left:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
	from {left:0px;}
	to {left:200px;}
}

3、举例实现二

设置一个图片过度时的指定不透明度。从0.4到1.0

html代码如下：

<div class="fade">
    <img src="img3.jpg">
</div

css代码如下：

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

4、完结。-------------------------------------------------------------------------------------------------------------------