动画合集

动画 指一种样式变为另一种样式 keyframes应当始终定义0 100 过程
1 transition  制作鼠标滑过图片时的放大效果

css
.wrap{
		width: 340px;height: 340px;
		position: absolute;
		top: 30%;
		left: 20%;
		overflow: hidden;
		border: 1px solid;
		

	}
	img{
		transition:transform 5s;
	}
	img:hover{
		transform:scale(1.4,1.4);
	}
html
<div class="wrap"><img src="1.png" alt="" ></div>

设置好wrap的宽度高度，并且设置overflow hidden  这样可以时图片放大时wrap尺寸不会随它变化，并且溢出的隐藏起来。
当鼠标滑过时，为transform  设置5s的过度效果。
transition 语法transition :all 0.5s linear 1s all表示所有属性变化都用过渡效果四个参数依次表示属性，过渡时间，过渡函数，延迟时间


2 keyframes  制作动画

css 定义动画过程
@-webkit-keyframes first{
		0%{
			transform:rotate(0deg);
		}
		25%{
			transform:rotate(90deg);
		}
		50%{
			transform:rotate(180deg);
		}
		75%{
			transform:rotate(270deg);
		}
		100%{
			transform:rotate(360deg);
		}
	}
img{
		position: absolute;
		top: 30%;
		left: 20%;
		animation:first 5s infinite ;
		-webkit-animation: first 5s infinite linear;
		/*transform:rotate(10deg);*/
	}
animation要配合keyframes来使用

3  动画http://gudh.github.io/ihover/dist/index.html
第一组

难点：a 将鼠标移入时外面圆圈的旋转。用transform：rotate（180deg）来做
b外面圆圈的制作，可以为设置border-radius属性以及border的宽度颜色属性来制作。
c wrap内部图片要使它成为园，则应该overflow: hidden;border-radius: 50%; 再设置宽高。为了让图片显示清晰设置图片宽高自适应width: 100%;height: 100%;不然图片会被放大。
d 在鼠标移入时有两种动作，文字慢慢显示，圆圈旋转，注意这是最巧妙的地方，原框架中通过在外面套一个a标签，然后设置当它hover时改变以上两者的属性，达到我们需要的效果。

css
.wrap,.wrapo{
		width: 200px;height: 200px;overflow: hidden;border-radius: 50%;color: #fff;position: absolute;top: 10px;left: 10px;
	}
	.contener{
		position: relative;
		top: 100px;left: 100px;
		border: 1px solid;
	}
	.contener a{
		display: block;
		text-decoration: none;

	}
	img{
		width: 100%;height: 100%;
	}
	.border{
		width: 200px;height: 200px;border: 10px solid #ecab18;border-right-color: #1ad280;border-bottom-color: 
		#1ad280;border-radius: 50%;transition:all 1s ease-in-out;
	}
	 
	a:hover .border{
		/*border-color: #ecab18;
		border-top-color: #1ad280;border-left-color: */
		transform:rotate(180deg);
		
	}
	.wrapo{
		/*position: absolute;*/
		/*visibility : hidden;*/
		opacity:0;
		z-index: 5;
		transition:all 1s ease-in-out;
	}
	.wrapo h3{
		position: relative;top: 50px;left: 20px;
	}
	a:hover .wrapo{
		opacity: 1;
		/*visibility : visible;*/
		background-color: rgba(0,0,0,.3);
		
	}
html
<div class="contener"><a href="#">
<div class="wrapo"><h3>is it beautiful?</h3>
</div>
<div class="border">
</div>
<div class="wrap"><img src="5.jpg" alt="" ></div>
</a>
</div>

4  动画http://gudh.github.io/ihover/dist/index.html
第2组
所做更改，border尺寸要减小 并且经观察，border在wrap之上，故要为border设置position属性  以此来设置z-index属性。此时border已经脱离文档，故包裹图片的wrap不用设置position可以直接放上去出现与border的层叠，便会出现一个圆圈，又要设置wrap  并且显示时它显然显示在圆圈之上，也就是在border之上，故它也要设置position属性并且它的z-index大于border 尺寸与wrap一致。再设置它隐藏在左边即可。再观察，此时转动的应该是.wrap  故再为它设置hover时转动即可.但是此时当把鼠标移到wrappo时 a：hover也被触发。为什么呢  因为它也属于a的一部分，故会触发。即使此时opacity=0，但是它只是透明度为0，没有达到隐藏的目的，结下来解决这个bug。初步想法是把它隐藏起来。display不能运用动画，但是visibility可以，故这里先设置wrappo visibility=hidden  在  a:hover时再把visibility  设为可见即可 完美解决

css
.wrapo{
		width: 200px;height: 200px;overflow: hidden;border-radius: 50%;color: #fff;position: absolute;z-index: 7;left: 300px;
	}
	.wrap{
		width: 200px;height: 200px;overflow: hidden;border-radius: 50%;transition:all 1s ease-in-out;
	}
	.contener{
		position: relative;
		top: 100px;left: 100px;
		border: 1px solid;
		width: 200px;
		height: 200px;
	}
	.contener a{
		display: block;
		text-decoration: none;

	}
	img{
		width: 100%;height: 100%;
	}
	.border{
		width: 170px;height: 170px;border: 15px solid rgba(255,255,255,.5);border-radius: 50%;position: absolute;z-index: 5;
	}
	 
	a:hover .wrap{
		/*border-color: #ecab18;
		border-top-color: #1ad280;border-left-color: */
		transform:rotate(180deg);
		
	}
	.wrapo{
		/*position: absolute;*/
		/*visibility : hidden;*/
		opacity:0;
		z-index: 5;
		transition:all 1s ease-in-out;
	}
	.wrapo h3{
		position: relative;top: 50px;left: 20px;
	}
	a:hover .wrapo{
		opacity: 1;
		/*visibility : visible;*/
		background-color: rgba(0,0,0,.3);
		left: 0px;
		
	}
html
与上面一致

第2组第二种做法，运动用transform来做，先transformX（100%）再在a：hover时再transform（0）就可以了  至于鼠标移入wrappo时的hover事件  用一个不常用的来做。把事件给禁止了pointer-events:none;并且圆圈不用border来做了 而用wrap的伪元素来做并且设置他的box-shadow inset值

css
.wrapo{
		width: 200px;height: 200px;overflow: hidden;border-radius: 50%;color: #fff;position: absolute;background-color: #1a4a72;transition:all 1s ease-in-out;backface-visibility:hidden;transform:translateX(100%);//% 是相对于包含框的设置position是为了脱离文档流让它与其他元素重叠。设置它的z-index是为了在其他元素之上。
pointer-events:none;
	}
	.wrap{
		width: 200px;height: 200px;overflow: hidden;border-radius: 50%;transition:all 1s ease-in-out;
	}
	.wrap:before{
	content: '';width: 100%;height: 100%;display: block;border-radius: 50%;box-shadow:inset 0px 0px 0px 10px  rgba(255,255,255,.3),2px 2px 2px rgba(0,0,0,.3);position: absolute;//使伪元素脱离文档流定义在img上面 box-shadow  前边一个值定义内圈，后面的一个值定义向外的阴影
	}
	.contener{
		position: relative;
		top: 100px;left: 100px;
		border: 1px solid;
		width: 200px;
		height: 200px;
	}
	.contener a{
		display: block;
		text-decoration: none;

	}
	img{
		width: 100%;height: 100%;
	}
	
	 
	a:hover .wrap{
		/*border-color: #ecab18;
		border-top-color: #1ad280;border-left-color: */
		transform:rotate(-180deg);
		
	}
	.wrapo{
		/*position: absolute;*/
		/*visibility : hidden;*/
		opacity:0;
		z-index: 5;
		text-align: center;
		transition:all 1s ease-in-out;
	}
	
	a:hover .wrapo{
		opacity: 1;
		/*display: block;*/
		
		/*visibility : visible;*/
		background-color: rgba(0,170,0,.3);
		
		transform:translateX(0);
		
	}
html
<div class="contener"><a href="#">
<div class="wrapo"><h3>is it beautiful?</h3>
</div>

<div class="wrap"><img src="5.jpg" alt="" ></div>
</a>
</div>

注意 一旦脱离文档流则在正常文档流之上，不需要设置z-index  所以这里伪元素未设置层高。
3  第3组  wrap边变小变换位置，注意此处选择第二种方法特别好做，html代码量少，可以减少浏览器的渲染。再更新一个我不知道的知识，当边变小变换位置时第一个想到的是transform:translateX(50%);transform:scale(.5,.5); 但实际上只会执行第二条语句，第一条无效，怎么解决？用transform:translateX(50%) scale(.5）; 便可以同时变化。 好解决了这条关键的东西，其他就简单了 跟上面一样再变化translateX的正负值，会出现各个效果
4  第4组 在第三组基础上，观察wrap向右移动并且渐渐消失，wrapo向右移动
稍微变化部分的代码如下

css
a:hover .wrap{
		/*border-color: #ecab18;
		border-top-color: #1ad280;border-left-color: */
		transform:translateX(100%);
		opacity: 0;
		
	}
a:hover .wrapo{
		opacity: 1;
		/*display: block;*/
		
		/*visibility : visible;*/
		background-color: rgba(0,170,0,.3);
		
		transform:translateX(0);
		
	}
可是当很快的把鼠标移到wrap时，发现未还原

5 第5组 wrap渐渐变大 直到消失出现.wrap 将wrap与wrapo重叠为了不用考虑二者层级关系，可以这样设置 将wrapo的透明度设为0  待a：hover时再设为1 并且把wrap透明度设为0，这样就不用设置其中一个的position。也可以这样解决，设置二者的z-index值，并且保证wrap在wrapo之上  要这样的话二者都要设置position属性，结果表明，都是可行的 这是第二种hover时不用再去改变wrapo的任何属性，只需要改变wrap即可

html结够如上一样
css
a:hover .wrap{
		transform:scale(1.5);
		opacity: 0;

		
	}
	
	
	a:hover .wrapo{
		opacity: 1;
		
	}
.wrapo{
		
		opacity:0;
		/*z-index: 5;*/
		text-align: center;
		transition:all .3s ease-in-out;
	}

第6组 wrap渐渐变小 当变到一定程度并消失的时候，wrapo才从左边移到到wrap所在的地方，注意是前者消失之后后者才开始运动，故需要为wrapo的运动添加一个延迟，而transition里面恰好有这个设置。把需要延迟时间加到最后即可。transition:all 0.35s ease-in-out 0.1s; 其它跟上面的差不了太多。
7 第8组   每一个图形有两个连续的运动，wrap先变小，再向左平移,可是transform 只能对一个物体设置一种运动或同时有两种运动，所以不能满足要求，现在在它外面套一个盒子包裹它，把这个包裹盒子的运动和它本身的运动结合起来，可以解决这个问题，具体步骤:先让这个包裹盒子缩小为原来的1/2，再将wrap向左边平移(有延迟)，代码如下（只设置与动画有关的css）

html
<div class="wrap-container">
<div class="wrap"><img src="5.jpg" alt="" ></div>
</div>
css
.wrap-container{
		border-radius: 50%;transition: all 0.35s ease-in-out;
	}
a:hover .wrap-container{
	transform:scale(.5);

	}
a:hover .wrap{
		transform:translateX(-100%);
		opacity: 0;

		
	}
.wrap{
transition:all 0.35s ease-in-out 0.35s;//有延迟便于使二者的运动连续。
}

wrapo的运动稍复杂一些。 分析一下  试验可知，当一个盒子里面套另一个盒子，并且为两个盒子设置变换效果时，浏览器先为外面盒子设置效果，然后才是里面的，比如让外面盒子缩小里面的盒子平移，那麽他的变换顺序是先变小了再平移，所以假如是一个圆的话那么它的圆心再这个过程中在水平方向上会发生变化，为了避免这样，这样  让外面盒子平移里面的盒子缩小 故初始状态wrapo的css这样设置

css
.wrapo{
transform: scale(.5);
transition:all 0.35s ease-in-out 0.7s;
}
.wrapo-container{
		border-radius: 50%;transition: all 0.35s ease-in-out 0.35s;transform: translateX(100%);opacity:0;//opacity设置在它上面不然，设置在wrapo上市.wrapo-container translatex时看不见元素。
	}
html
<div class="wrapo-container">
<div class="wrapo"><h3>is it beautiful?</h3>
</div>
</div>

运动时，先是wrap变小，然后wrap向左平移，这与wrapo-container平移是同时的，wrapo-container平移完后才是wrapo的变大，故右边元素的运动延迟分别为0.35,0.7 s
所以
a:hover 时的css为

a:hover .wrapo{
		/*opacity: 1;*/
		/*transform:translateX(0);*/
		transform: scale(1);
		
		
	}
a:hover .wrapo-container{
	/*transform: scale(1);*/
	transform: translateX(0);
	opacity: 1;

	}

过程好复杂的说！
第9组 难点在于解决wrap的两个运动 实验可知  translateX  指向图像不转动时的右边（相对于它自己是固定的） 当它转动时x在我们看来也在转动，故现在设置这个动画 transform:translateX(100%) rotate（360deg）在转动时会向四面八方平移，解决方法是外面套一个wrap-container 设置它的平移transform:translateX(100%) 里面的wrap设置为转动，且使其同时运动，此时 wrap同时参与有、自己的转动还有wrap-container的平移