CSS3动画

发布于 2019-04-22  6 次阅读


最近会记录一些前端学习的笔记,感觉前端能干的更多更有趣!但未来走向谁也说不定,现在姑且算是全栈萌新吧,这两天因为看了阮一峰老师写的文章和推荐的css动画视频(视频在Youtube上,打不开的自行解决),了解之后觉得很炫酷!在这记录我所吸收的,整理一下思路。

Transform

一峰老师的文章和视频都没有讲到transform,在这我还是想把它记录下来,transform并不属于动画,而是一种转变,从一个样式,转成另一种样式,当然能转的样式是有限制的,语法如下:

transform:translate() rotate() scale() matrix() skew() perspective();

这里的每个值都不是必须的
比较常用的属性有:
  translate(X,Y):translate用来移动,由所给的x,y坐标来移动,以左上角为(0,0)为基准
  rotate(angle):rotate用来旋,给deg值来旋转,比如ratate(7deg)
  scale(X,Y):scale用来缩放,同样可以按坐标来缩放,也可以用比例,比如scale(1.2)

三个属性还可以在名字后添加上限制,分别有3d、X、Y、Z,添加后所给的参数也有所改变,例如:
  translate3d(X,Y,Z)、translateX(X)、translateY(Y)、translateZ(Z)

不常用的有:
  matrix(n,n,n,n,n,n):为 3D 转换元素定义透视视图
  skew(x-angle,y-angle):沿着 X 和 Y 轴的 2D 倾斜转换
  perspective(n):为 3D 转换元素定义透视视图
具体例子可以查看这个可视化样式进行观看

这几个属性比较简单,讲一下分别的作用就好了

属性 功能
translate(X,Y) 以所给的参数进行偏移
ratate(X,Y) 以所给的参数进行旋转
scale(X,Y) 以所给参数进行缩放
matrix(n,n,n,n,n,n) 为 3D 转换元素定义透视视图
skew(x-angle,y-angle) 沿着 X 和 Y 轴的 2D 倾斜转换
perspective(n) 为 3D 转换元素定义透视视图

transform扩展出来的还有transform-arigin、transform-style、transform-box等等,不过MDN显示这几个都处于实验阶段,尽量不要拿到实际开发中使用,所以想了解效果的可以去MDN看看。

Transition

上面说的transform不是动画,他在网页开发中是不会单独拿来用的,因为效果太生硬了,完全没有过渡,对用户或开发者来说,视觉体验是极差的,当然可以用js来实现,但是代码量太多了,而transition和transform的结合,就成了动画,transform让元素从一个样式变成另一个样式,这其中是有一个隐式过程的,只不过浏览器直接呈现给我们的是结果,而transition可以让这个过程呈现出来,语法如下:

transition-duration:<time>
transition-delay:<time>
transition-timing-function:<function>
transition-property:<property>
简写形式(没有指定先后顺序):
transition: <duration> <delay> <timing-function> <property>;

  duration是来控制过渡时间的,就是一个样式变成另一个样式所需的时间
  delay来控制延时,即什么时候才开始过渡
  timing-function是来控制速度,默认是ease(先加速再减速),其他值还有ease-in(加速)、ease-out(减速)、linear(匀速),还有一个cubic-bezier,这个是函数,来放四个值,参数可以在这里查看工具网站
  property来指定将要进行过渡的css属性。

注意:在使用transition-duration的时候需要给出变化前后的具体数值
比如height从100变为200,这里都有具体数值,在一个div使用 margin:0;变为margin:0 auto;或者diplay:block变成none这些没有具体值的时候,并不会进行过渡
  这些值可以单独使用,也可以以简写形式一起使用,一起使用能让transition变得更加有趣,你可以用property指定宽高以delay多少秒后再进行过渡,怎么使用完全取决于你的脑洞大小。
transition还是有缺陷的:
(1)依赖transfrom、伪类、js、etc来触发
(2)一次性样式,无法循环。
(3)只能设置起始状态和结束时的状态
(4)property虽然可以指定属性进行变化,但整个过程只有指定的那几个会变化,让整个动画变得单一。

Animation由此而出生

Animation

Animation要比transition复杂许多,语法结构有细分出来写、和简写形式

animation-name:
animation-duration:
animation-timing-function:
animation-delay:
animation-iteration-count:
animation-direction:
animation-fill-mode:
animation-play-state:
简写形式:
animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;

其中duration、delay、timing-function的值和transition的用法一样(timing-function多了step()
看起来没用其实是你脑洞不打大!这个例子就很有趣!!)其他值的用法如下:

iteration-count的值有:
  数字:播放的次数
  infinite:循环播放
direction的值有:
  normal:正常循环,动画结束后回到起始状态继续循环
  alternate:动画交替反向运行,结束动画后反向过渡,过渡到起始状态后又反向过渡,反复循环
  reverse:第一次从起始状态过渡结尾,之后从尾过渡到起始状态,再回到尾进行过渡,反复循环
  alternate-reverse:由名字就可以知道是alternate和reverse的结合了,这里用色值#cc0到#079为例子
bg2014021401.png

play-state:
  runnig:这是默认值,停止播放的时候返回初始状态
  paused:停止播放的时候以当前的状态停止
fill-mode设置动画播放前后的目标应用样式:
  none:不修改播放前后不应用任何任何样式,也是fill-mode的默认值
  forwords:之前我们每次播完停止会回到起始状态,这个可以让播放完取最后一帧(取决于direction和iteration-count)
  backwods:播放完取第一帧(同样受direction和iteration-count影响)
  both:会执行forwords和backwords的动作
name:为元素指定一个名称,后面可以用@keyframes关键字来绑定,绑定完的name就可以在不同时间段(关键帧)有不同的状态了,给个例子

/* html代码: */
<div id="test">这是一个测试</div>
/* css代码: */
#test{
        width:200px;
        margin: 0 auto;
        height:200px;
        line-height: 200px;
        text-align: center;
        animation: 3s DivName infinite; /*给了过渡时间为三秒,名字为DivName,循环播放*/
}
/* @keyframes绑定名字 */
@keyframes DivName{
        /* 将整个过渡过程分成一百个百分点,可以对给定的哪个状态进行哪些属性的改变*/
        0% {background-color:lightcoral;}  /* 初始状态*/
        50% {background-color:chocolate;}  /* 中间状态*/
        100% {background-color:lightgrey;}  /* 结束状态*/
}

/*----------------------------------------------------------------*/
初始状态和结束状态可以不用百分比用from和to,以下的代码和上面的@keyframes代码效果一样
@keyframes DivName{
        from {background-color:lightcoral;}  /* 初始状态*/
        50% {background-color:chocolate;}  /* 中间状态*/
        to {background-color:lightgrey;}  /* 结束状态*/
}

/*----------------------------------------------------------------*/
以下的这些@keyframes写法都是可行的,浏览器会自动生成缺少的关键帧
@keyframes DivName{
        from{}
        50%{}
}
@keyframes DivName{
        50%{}
        to{}
}
@keyframes DivName{
        from{}
        to{}
}
@keyframes DivName{
        from,to{}
        50%{}
}
*/

/*----------------------------------------------------------------*/
上面给的视频里,讲到和transition-duration一样,每个关键帧都要给出具体数值,不然就无法实现
@keyframs DivName{
        from{border:100px solid black;}
        to{border:1px dashed black;}
}
/*颜色的话浏览器可以转成RGB模式,但是solid是没有具体数值的,想让上面的代码效果实现,
可以在原来的样式里加上border-style:solid;*/
#test{
        width:200px;
        margin: 0 auto;
        height:200px;
        line-height: 200px;
        text-align: center;
        animation: 3s DivName infinite;
        border-style:solid;
}

/* 但我在chrome(73.0.3683.103版本)测试的时候是可以的,注意到了视频时间是13年,
现在已经过了6年了,可能是更新了也不一定了,所以我学习的时候还以上面的视频为辅,
MDN文档为主 */

CSSanimation.jpg
整理到这就差不多了,最近在学思维导图,顺便也整理了一个,虽然丑,但是才刚开始!整理思路的目的达到了就行!