前言
一般web开发都不怎么重视css,我之前也很少写动效,但是写了之后发现给人的体验完全是不同的,运用动画能大大提高用户体验。
正文
动画中有几个词容易搞混,transform,translate, transition,下面一个个介绍
一、transform
transform有几个属性,rotate(旋转), scale(缩放), skew(扭曲),translate(移动),matrix(矩阵变形)
其中我个人用的比较多的就是translate,具体用法: transform:translate(x, y), 即以左上角为原点移动到坐标为(x, y)的位置
二、transition
这个则是用来做动画过渡的,就比如上一个例子的移动,光写translate(x, y) 的话,打开页面,这个css属性作用的dom元素就直接出现在(x,y)的位置,
这时可以加上transition
div{ width:200px; height:50px; transition: all 1s; } div:hover{ transform: translate(100px, 0); }
上述代码表示一个宽200像素,高50像素的div在鼠标移上去时在1s之内移动到(100px,0)处
transition有4个属性:
1.transition-property,指的是哪个属性执行动画,主要有三个值 none(没有属性改变),all(默认值,表示所有属性),indent(元素属性名,这里可以填各种属性,像是高度,宽度,颜色,透明度,但是不能填display)
2.transition-duration,持续时间
3.transition-timing-function,有5个值 linear(匀速),ease(逐渐慢下来),ease-in(加速),ease-out(减速),ease-in-out(先加速后减速)
4.transition-delay,延迟,指的是在一段时间后执行动画。
例子:
img{ transition: height 1s 5s ease; }
如果两个时间同时出现,则表示第一个是持续时间,第二个是delay
transition的局限(这个是抄阮一峰老师的)
(1)transition需要事件触发,没法在网页加载的时候就进行动画
(2)transition是一次性的,没法重复发生,除非你多次去触发,(比如用js循环模拟click)
(3)transition只有开始状态和结束状态
为了解决上面的局限,下面进入css animation
Animation
先定义一个动画
// 先定义一个名为variety的动画,效果是让高度变化,先短后长 @ keyframes variety{ 0% {height: 100px;} 50% {height:50px;} 100% {height: 200px;} } // 在div上使用这个动画 div{ height:10px; width: 10px; animation: 2s variety; }
这是个一次性的动画,结束后div的高度会恢复为10px
几个实用的关键词:
(1)infinite ,表示循环播放动画
(2)forwards表示动画结束后保持结束状态,不变回起始状态
(3)可以在variety后面加上数字,表示动画播放几次
(4)alternate 比如定义一个div向右移的动画,div { animation: 1s rightmove alternate 5 forwards } 这个就表示div会 “右 -> 左 -> 右 -> 左 -> 右” 这么来回运动,最后停在右边
详细例子:div { animation: 1s 3s rightmove linear alternate 5 forwards } 运动方式如上,加入了3s的延迟和匀速运动
最后加一个animation-play-state的例子
div{ width:100px; height:100px; background:red; position:relative; animation:mymove 2s alternate 3; animation-play-state: paused; } div:hover{ animation-play-state: running; } @keyframes mymove{ from {width:20px;} to {width:200px;} }
表示div从宽20px到200px往复变化三次,但是要hover才触发动画,其他时间都是动画暂停
以上