css3动画效果初学

一、transition

transition-property：规定应用过渡的CSS属性的名称
transition-duration：定义过渡效果花费的时间
transition-timing-function：规定过渡效果的时间曲线
其中
        linear 是以相同速度开始至结束的过渡效果
        ease 是从慢速开始，然后变快，然后慢速结束的过渡效果
        ease-in 是以慢速开始的过渡效果
        ease-out 是以慢速结束的过渡效果
        ease-in-out 是慢速开始和结束的过渡效果
transition-delay：规定过渡效果从何时开始，即是延时效果

二、变形

旋转rotate
移动translate:
    translate(x,y),
    translateX()
    translateY() 
缩放scale：
    scale(X,Y)
    scaleX() 
    scaleY()
扭曲skew
改变元素基点transform-origin

三、动画

引入动画animation-name
动画执行时长animation-duration
动画执行次数animation-iteration-count
动画开始前延时animation-delay
反向交替运行animation-direction

关于动画效果抖音案例

 

 

 

完成效果图