CSS3———— animate(),transtion,transfrom.translate()

2019独角兽企业重金招聘Python工程师标准>>>

animate() 函数用于执行一个基于css属性的自定义动画。

你可以为匹配的元素设置css样式，animate()函数将会执行一个从当前样式到指定的css样式的一个过渡动画.

例如：某个div元素的当前高度为100px，将其CSS height属性设为200px，animate()将会执行一个将div元素的高度从100px逐渐增加到200px的过渡动画。

语法：

(selector).animate({styles},speed,easing,callback)

复杂动画：

1定义动画名：

@keyframes  mymove{

0%{}

..

50%{}

..

100%{}​

}

2在css里面调用动画

div{animation: animate-name /*启动动画的名字（*）*/
               animation-duration  /*一个周期完成的时间（*）*/
               animation-iteration-count /*动画播放次数，值可为数字和infinite（无限次播放）*/
               animation-timing-function​ /* 动画速度曲线  linear 从头到尾匀速
                                                        ease默认。低速开始，加速过程，低速结束
                                                        ease-in 低速开始
                                                        ease-out 低速结束
                                                        ease-in-out 低速开始和结束
                                         */
               animation-delay           /*动画延迟，秒单位 2s*/

}​

<!------------------------------------------------------------->

transtion允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。

语法：

transtion：transition-property /*过渡效果的 CSS 属性的名称,值可为all*/
           transition-duration /*完成过渡效果需要多少秒或毫秒*/
           transition-timing-function /*速度效果的速度曲线*/
           transition-delay /*延迟时间*/
           

例如，当鼠标移上,触发效果：

首先，定义触发的效果css样式

div:hover{
background:red;
font-size:14px;
color:#ffffff;
}

其次，在div的原样式中添加

transtion:all .2s ease-in;

表示，当鼠标移上，在2s内，div的背景变成红色，字体变成14像素，颜色变成白色。

transfrom 改变，使…变形；

它的常用属性：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。

rotate()，单位为deg,例如：ratate(30deg);表示旋转30度。

skew(),单位deg，表示倾斜。例如：skew(30deg)。表示以中间为中心，顺时针倾斜了30度。

scale()，放大或缩小，例如scale(1.1)。表示在原来的大小上，宽，高各放大1.1倍。

translate(x,y)，变动，移位。例如translate(120px,10px)，表示，在原来的位置上，向左移动了120px,向下移动了10px。

综合使用：

transfrom:rotate(30deg)   skew(30deg)  scale(1.1)  translate(120px,10px);

那transfrom如何和transtion联合使用呢？

在上述的鼠标移上，触发效果中：

div:hover{
background:red;
font-size:14px;
color:#ffffff;
<!--添加变形-->
transfrom: rotate(30deg) skew(30deg) scale(1.1) translate(120px,10px);
}

则，当鼠标一上去才会触发变形，而不是页面刷新过后就是变形后的样式，这样有了一个过渡性的变化。

转载于:https://my.oschina.net/yanyaya/blog/713843