深入理解CSS3动画:animation、transform、transition

在CSS3之前,动画主要都是以JavaScript或者Gif图片来实现,但是实现效果并不是很理想或者制作起来很麻烦,自有了CSS3之后很多动画几句代码即可实现,方便,快速,性能更好。

目录

  • animation
  • transform
  • transition

一、animation

我们通过一个简单的例子来理解:延迟1秒执行,从左0往右100px无限循环来回移动;

div {
    width: 80px;
    height: 80px;
    background: #f30;
    position: relative;
    animation-name: test;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    /* 
    简写属性
    animation: test 1s linear 1s infinite alternate;
    */
}
@keyframes test {
    0% { left: 0;}
    100% { left: 100px;}
}

image

【在线预览】

怎么样,是不是觉得so easy?对,就是这么简单!下面来详细讲解下这个代码:

语法:
@keyframes test {
    0% { left: 0;}
    100% { left: 100px;}
}
keyframes name from 起始 to 结束
动画名称 等同0% 等同100%

当然也可以设置多个阶段,会有不同的效果哟,下面让我们来围着四周跑一圈:

@keyframes test {
    0% { left: 0; top: 0;}
    25% { left: 0; top: 50px;}
    50% { left: 50px; top: 50px;}
    75% { left: 50px; top: 0;}
    100% { left: 0; top: 0;}
}

image

【在线预览】

动画属性:
  • animation-name
    绑定到选择器的 keyframe 名称,简单来说就是名字。
animation-name: keyframename | none;
  • animation-duration
    完成动画所花费的时间,单位秒或毫秒,例:3s、3000ms。
animation-duration: time;
  • animation-timing-function
    规定动画的速度曲线,默认ease。
linear ease(默认) ease-in ease-out ease-in-out cubic-bezier(n,n,n,n)
从头到尾的速度相同 以低速开始,然后加快,在结束前变慢 动画以低速开始 动画以低速结束 动画以低速开始和结束 贝塞尔曲线

image

【在线预览】

  • animation-delay
    规定在动画开始之前的延迟,很好理解,就是延迟(等待)多长时间再执行动画(单位秒或毫秒)。
animation-delay: time;
  • animation-iteration-count
    规定动画播放次数,默认1;n(次数),infinite(无限)。
animation-iteration-count: n | infinite;
  • animation-direction
    规定是否应该轮流反向播放动画;normal(正常播放),alternate(交替播放),reverse(倒序播放),alternate-reverse(反向交替播放)。
animation-direction: normal | alternate | reverse | alternate-reverse;

image

【在线预览】

  • animation-fill-mode
    规定动画在播放之前或之后,其动画效果是否可见。
    forwards:当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
    backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
    both:向前和向后填充模式都被应用。
animation-fill-mode : none | forwards | backwards | both;
  • animation-play-state
    规定动画正在运行还是暂停,paused(动画已暂停),running(动画正在播放)。
animation-play-state: paused | running;

image

【在线预览】

二、transform

transform可以用来设置元素的形状改变,主要有以下几种变形:

1.rotate - 旋转

旋转分为2D旋转和3D旋转;
正数为顺时针旋转,负数为逆时针旋转,单位:deg;

  • transform-origin
    旋转元素一般配合着transform-origin属性,transform-origin是用来设置旋转点的;
transfrom-origin:0px 0px; // 这里代表左上角0那个位置
transfrom-origin:center center; // 代表中心点,也是默认值
  • 2D旋转
transform: rotate(45deg); // 顺时针旋转45度

image

【在线预览】
另外,我们可以结合animation,然后就可以出现以下效果,就可以一直转圈圈:

@keyframes test{
    0%{ transform: rotate(0)}
    100%{ transform: rotate(360deg);}
}

image

【在线预览】

  • 3D旋转
transform: rotate3d(x,y,z,angle);

x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值。
y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值。
z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值。
angle:一个角度值,指定在3D空间旋转角度。

image

【在线预览】

  • scale - 缩放
transfrom:scale(x,y);

x:表示水平方向缩放的倍数。
y:表示垂直方向缩放的倍数,y为可选参数,不设置则表示x,y同时缩放相同倍数。

image

【在线预览】
当然为了效果看起来看流程,我们结合animation使用,就可以看到一个由小变大的效果:

@keyframes test{
    0%{ transform: scale(0.5)}
    100%{ transform: scale(1.5);}
}

image

【在线预览】

  • skew - 扭曲
transform: skew(x,y);

x:x轴(水平方向)倾斜
y:y轴(水平方向)倾斜

image

【在线预览】
这里我们设置的参数为:transform: skew(45deg,0)等同于transform: skew(45deg),也就是x轴顺时针45度。

  • translate - 移动

这个参数很简单,俗称:位移。

image

【在线预览】

三、transition

transition属性设置元素当过渡效果,CSS过渡目前是比较常用的,它一共有4个子属性:

  • transition-property: 过渡属性,默认值:all;
  • transition-duration: 过渡持续时间,默认值:0s;
  • transiton-timing-function: 过渡函数,默认值:ease;
  • transition-delay: 过渡延迟时间,默认值:0s;
div {
    width: 80px;
    height: 80px;
    background: #be2323;
    transition-duration: 2s;
    transition-property: width;
    transition-timing-function: linear;
    transition-delay: 0s;
    /* 简写属性
    transition: width 2s linear 0s;
    */
}
div:hover{
    width: 300px;
}

image

【在线预览】
4个子属性和文章第一大点:animation相同,认真看下来的朋友,都应该了解用法了,这里就不再做详述了。

总结

  • 以上为CSS3几种动画方式,几大属性都可以相互结合使用,比如说transform配合transition过度,就会把本身变化缺失的过程补充完整,从而得到一个完善、流畅的动画效果。
  • 当然学会了CSS3动画,不能把JS给遗忘了,CSS3+JS是可以写出很多酷炫效果及提升用户体验的,比如基本的点击播放动画,暂停动画,图片逐渐方法等等,就不一一说了,前端注重用户体验,相互的合理使用,用户体验是能做到极大的提升的。
  • 更多的东西大家就自己去探索了,多读、多写,就会有提升!
  • 大家如果有什么好的想法或见解,欢迎评论区沟通,谢谢!

推荐阅读更多精彩内容