transform、transition、animation动画效果 |
您所在的位置:网站首页 › translate动画效果 › transform、transition、animation动画效果 |
transform(变形) transition(过渡) animation(动画)
一、transform:直接改变大小和位置,显示改变的结构,没有过渡和变形的时间
transform:rotate(360deg) scale(-1.2,1.2) translate(100px,50px) skew(45deg,45deg) 通过transition:transform 1s 指定对transform起动画效果 (1)旋转rotate 利用css变形属性可以将对应的属性旋转对应的角度,可以顺时针旋转,逆时针(负值)旋转,可以3D旋转,3D旋转可以分别绕X轴Y轴Z轴旋转; (2)缩放scale 负值为先翻转,再缩放对应的倍数,可以在X、Y、Z上做缩放 (3)位移translate 可以在X、Y轴上做平移,或者同时在X、Y、Z轴上做平移 (4)斜切skew 能够让元素倾斜显示,本质上是可以让X、Y轴倾斜一定程度 二、transition(过渡):会有一个形变的过程,会有过渡和形变时间第一个属性值表示动画变换的时间,第二个属性值代表延时 transition:transform 1s 指定对transform 起效果 transition:margin 1s 指定对margin 起效果 transition:width 1s,height 1s 1s;
速度曲线 贝塞尔曲线 transition: 1s linear 匀速 transition: 1s esae-in 匀加速 transition: 1s ease-out 匀减速 infinite为无限次数循环。 三、animation(动画)animation是一个过渡的过程,引入了帧的概念,定义keyframes动画,然后绑定一个或者多个动画。transition有点像他的简化版,animation也可以实现transition变化某个属性的功能 并且可以去设置动画的播放时间(animation-duration),播放方式(animation-timing-function,播放速度),播放次数,播放方向(在不同次数,发生不同方向的动画,比如从左到右,然后从右到左),播放后的状态(会到初始状态,还是结束状态)控制动画状态(控制某物体暂停或执行动画) transition和animation主要区别: transition也可以看做animation的缩略版,他们实现的功能有重复的地方,比如说要实现某个div的宽度有30rem变到20rem,两者都可以实现。 兼容: div{ animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */ } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} }
引入网页动画库: 两者一定要一起写,否则就会造成某个方向的滚动条,具体看代码: overflow-y:scroll; overflow-x:hidden;移动端当设计图为750px而字体大小为20像素左右时,需要对包着字体的盒子和字体大小放大两倍,然后缩小为scale(0.5),因为屏幕320时会使字体小于8px导致无法缩小,此时还要注意中心点的位置,用transform-origin:left ,top;否则盒子的位置会跑
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |