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

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

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度。CSS3———— animate(),transtion,transfrom.translate()_第1张图片

skew(),单位deg,表示倾斜。例如:skew(30deg)。表示以中间为中心,顺时针倾斜了30度。CSS3———— animate(),transtion,transfrom.translate()_第2张图片

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

CSS3———— animate(),transtion,transfrom.translate()_第3张图片

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

CSS3———— animate(),transtion,transfrom.translate()_第4张图片

综合使用:

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

你可能感兴趣的:(CSS3———— animate(),transtion,transfrom.translate())