Css动画

CSS transition过渡动画

位移 translate

transform

translate(x,y) 改变位移(2d)
translate(x,y,z) 3d转换 用于z轴的值
translateX(x)  改变x方向
translateY(y)  改变y方向
translateZ(z)  改变z方向

缩放 scale

scale(数值) 缩放元素的倍数
scale(x,y) //2d
scale3d(x,y,z) //3d
scaleX(x)  //改变x方向
scaleY(y)  //改变x方向
scaleZ(z)  //改变x方向

旋转 rotate

rotate(angle) //2d
rotate3d(x,y,z,angle) //3d 第四个参数是旋转的角度
rotateX(angle)
rotateY(angle)
rotateZ(angle)

倾斜 skew//没有3d的方法

skew(x-angle,y-angle)
skewX(xangle)
skewY(yangle)

transition 语法

• 过渡的属性名称: transition-property
• 动画执行的时长: transition-duration
• 改变与变形的原点位置：transform-origin
• 动画运动的曲线: transition-timing-function
• 动画何事开始:transition-delay单位是秒或者毫秒
• 运动曲线:transition-timing-function
• linear 匀速
• ease 慢速开始，变快，慢速结束
• ease-in 慢速开始
• ease-out 慢速结束
• ease-in-out 慢速开始，慢速结束
• cubic-bezier(n,n,n,n)贝塞尔曲线

注意点

transition:过渡的属性(left,width,height,transform...) 过渡时长,延迟时长,时间函数

##### 过渡多个属性的时候，用逗号隔开
==transition:width 1s linear,height 1s linear;==

10.过渡多个属性的时候，用逗号隔开
transition:width 1s linear,height 1s linear;

注意点

transition: all 1s linear; 过渡所有属性
过渡transfrom属性的时候

transition: all 1s linear;
transition: transfrom 1s linear;

改变多个属性的时候，空格隔开
transfrom:scale(2) rotate(45deg);

• 注意点2:transition必须通过事件触发,只能控制另个状态,一个是开始状态,一个是结束状态。

animation定义关键帧动画

定义动画
@keyframs 动画名称 {
     
    0%{
       等于from//初始是0%；
        需要改变的属性
    }
    25%{
     
        需要改变的属性
    }
    50%{
     
        需要改变的属性
    }
    100%{
      等于to
        需要改变的属性 //结束是100%；
    }
}

调用动画的值或者属性

• animation复合属性:name duration timing-function delay
• animation-iteration-count: 播放次数
• aniataion-delay:动画开始之前的延迟。
• animation-direction: 是否轮流反向播放
• animation-iteration-count: infinite,无限循环
• animation-duration:动画持续完成的时长,(以秒为单位)
• animation-play-stat: 规定当前动画是正在执行还是暂停
• animation-play-state:paused(暂停) running(正在执行)
• animation-fill-mode:规定动画开始之前或者之后，动画效果是否可见.
• animation-fill-mode：both/forwards(保留动画最后一帧的状态)/backwards/none。

区别

• transition需要事件或者伪类来触发，animation不需要
• transition只要开始和结束两个状态。animation可以设置中间的状态animation可以设置动画的播放次数，还可以设置动画的暂停状态。

五steps(也是来定义动画的运动曲线)

关键帧之间的跳跃的，而linear、ease这些是连贯性的。

语法

steps(n,[start|end]);//n是自然数，把动画分成n份
steps(1,start) === step-start;
跳过第一帧(0%)
steps(1,end) === step-end
跳过最后一帧(100%);

• 注意点3：transitionend:过渡结束之后触发事件
• 注意点4 animationend 动画结束之后触发事件

sass循环

例 5个div
for(var i=1;i<6;i++){
     
    @for $i from to 6{
     
        选择器:{
     
            }
        }
    }
}注意变量和字符串的拼接。