CSS3动画2019-01-14

作者: Cindy孙迪 | 来源:发表于2020-07-24 13:22 被阅读0次

网页高级知识点（三）
07day
08_dayCSS动画
CSS3 动画
CSS3 动画
css3动画
纯CSS3绘制的逼真，呆萌，超酷的CSS3动画
关于js动画和css3动画的差异性你了解吗？请简单谈一下
过度动画
动画知识点

<figure/> 用于规定独立的流内容（图像，图表，照片，代码等）
<figcaption/> 与figure配套使用，用于标签定义figure元素标题

transform，元素的变形处理

属性：translate(平移),rotate（旋转），scale（伸缩），skew（斜切）

translate (平移)

//例如：
translate(10px,10px)   //x轴，y轴

rotate（旋转）

// 例如：
Rotate(90deg);  //正值顺时针旋转，负值逆时针旋转
transform-origin:0 0;  //00 表示最左上角

bscale（伸缩）

//例如
scale(0.5,0.5) //x轴，y轴；沿着中心点，大于1，向外所谓，小于1，向内缩放，第二个参数没有写，默认取第一个参数

skew（斜切）

//例如
skew(50deg,20deg) //x轴，y轴；第二个参数没有写，默认为0

transition ，过度动画处理

两个属性的时候，只需要空格隔空
属性：property，duration，timing-function，delay

property 检索或设置对象中的参与过渡的属性
duration 过渡动画持续的时间
timing-function 检索或设置对象中过渡动画类型
（linear，ease，ease-in ，ease-out，ease-in-out）
delay 检索或设置对象延迟过渡的时间

//例如
transition:transform（all ）2s ease-in 1s  //写上all表示后面的都参与动画
//向右移动100px，并且颜色变化的案例
h2:hover{transition:all 2s ease-in;transform:translate(100px);background:palevioletred}

伪类延时

:nth-of-type(1){transition-delay:0.1s}

animation

①animation-name
②animation-duration
③animation-timing-function
④animation-delay
⑤animation-iteration-count
⑥animation-direction
⑦animation-play-state
⑧animation-fill-mode
⑨@keyframes
①animation-name指定@keyframes的名字，CSS加载时会应用该名字的@keyframes规则来实现动画
②animation-duration动画持续时间，默认是0表示无动画，单位可以设s秒或ms毫秒
③animation-timing-function动画播放方式，默认值ease，可以设linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)，steps。
④animation-delay延迟开始动画的时间，默认值是0，表示不延迟，立即播放动画。单位是s秒或ms毫秒。允许设负时间，意思是让动画动作从该时间点开始启动，之前的动画不显示。例如-2s 使动画马上开始，但前 2 秒的动画被跳过。
⑤animation-iteration-count动画循环播放的次数，默认值为1，即放完一遍后不循环播放。除数字外也可以设关键字infinite表示无限循环播放。
⑥animation-direction动画播放的方向，可设normal，alternate，alternate-reverse。默认值是normal表示正常播放动画。alternate表示轮转正反向播放动画，即动画会在奇数次（1，3，5…）正常播放，而在偶数次（2，4，6…）反向播放。alternate-reverse正好反过来，奇数次反向播动画，偶数次正向播动画。
⑦animation-play-state动画的状态，可设running，paused。默认值running表示正在播放动画，paused表示暂停动画。通常在JS端使用该属性object.style.animationPlayState=”paused”来暂停动画。
⑧animation-fill-mode动画的时间外属性，可设none，forwards，backwards，both。默认值none表示动画播完后，恢复到初始状态。forwards当动画播完后，保持@keyframes里最后一帧的属性。backwards表示开始播动画时，应用@keyframes里第一帧的属性，要看出效果，通常要设animation-delay延迟时间。both表示forwards和backforwards都应用。
⑨@keyframes动画帧就是区别animation和transition的关键。在transition中是无法更细致地控制时间段内执行的动作的，而在animation中用@keyframes可以细致地指定第一帧要干什么，第二帧要干什么。

案列

<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:myfirst 5s linear 2s infinite alternate;
    /* Firefox: */
    -moz-animation:myfirst 5s linear 2s infinite alternate;
    /* Safari and Chrome: */
    -webkit-animation:myfirst 5s linear 2s infinite alternate;
    /* Opera: */
    -o-animation:myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}
</style>