css animation杂记

css animation 杂记

一、css animation浏览器兼容性

二、
1、transition动画
（1）语法：
transition:
transition-property:规定设置过渡效果的CSS属性的名称；
transition-duration：规定完成过渡效果需要多少秒或者毫秒；
transition-timing-function：规定速度效果的速度曲线；
transition-delay：定义过渡效果何时开始
（2）语法实例：
1.1

transition-property:none|all|property;

示例：

div{transition-property:width;width:100px;}
div:hover{width:200px;}

1.2

transition-duration:ns|ms;

示例：

div{transition-property:width;
width:100px;transition-duration:1s;}
div:hover{width:200px;}

1.3

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

示例：

div{transition:width 1s ease;width:100px;}
div:hover{width:200px;}

1.4

transition-delay
transition-delay:ns|ms

示例：

div{transition:width 1s ease 1s;width:100px;}
div:hover{width:200px;}

2、transform动画
(1)语法：

transform:none|transform-functions;
transform-functions:

(2)语法实例
2.1

transform:translate(x,y);

示例：

div{transform:translate(100px,100px);}

2.2

transform:rotate(ndeg);

示例：

div{transform:rotate(45deg);}

transform:scale(n);

示例：

div{transform:scale(1.5);}

transform:skew(x,y);

示例：

div{transform:skew(-20deg,0);}

perspective:number|none;

示例：

div{transform:perspective(100px) rotateY(40deg);}

这个是很久之前学习的时候记的笔记了，侵删。