Transform,Transition,Animation

1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行 旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

div {

transform:rotate(7deg);

-ms-transform:rotate(7deg); /* IE 9 */

-webkit-transform:rotate(7deg); /* Safari and Chrome */

}

transition和animation两者都能实现动画效果

transform常常配合transition和animation使用

2、transition样式过渡，从一种效果逐渐改变为另一种效果

transition是一个合写属性

transition:transition-property transition-duration transition-timing-function transition-delay

从左到右分别是：css属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间

div{
    width：100px;
    height:100px;
    transition:transform 2s;
}
div：hover{
    transform:rotate(180deg);
}

3、animation动画 由@keyframes来描述每一帧的样式

这块算是闹明白了。但是 transform 配合transition使用 没有闹明白啊。先用吧。。。。╮(╯▽╰)╭

    .pre_picker {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 1000;
		width: 100%;
		height: 36%;
		animation:mydonghua 2s;
		-webkit-animation:mydonghua 2s; /* Safari and Chrome */
	}

    @keyframes mydonghua
	{
		0%   {height:0%;}
		25%  {height:9%;}
		50%  {height:18%;}
		75%  {height:27%;}
		100% {height:36%;}
	}
	
	
	@-webkit-keyframes mydonghua 
	{
		/* Safari and Chrome */
		0%   {height:0%;}
		25%  {height:9%;}
		50%  {height:18%;}
		75%  {height:27%;}
		100% {height:36%;}
	}

 

 

来源：oschina

链接：https://my.oschina.net/qingqingdego/blog/3214895