CSS transform、transition和animation基本用法

transform

CSStransform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。

注意： inline元素是不支持 transform，需要编程block

常用的功能属性

• 位移 translate
• 缩放 scale
• 旋转 rotate

位移 translate 常用写法

• translate( <length-percentage> , <length-percentage>? )
• translateX( <length-percentage> )
• translateY( <length-percentage> )
• translateZ( <length> 且父容器要有perspective属性)
• translate3d(x,y,z)

经常使用 translate(-50%,-50%)配合定位来实现元素的水平垂直居中

缩放 scale 常用写法

• scale( <number、> , <number>? )
• scaleX( <number> )
• scaleY( <number> )

旋转 rotate 常用用法

• rotate3d( <number> , <number> , <number> , [ <angle> | <zero> ] )
• rotateX( [ <angle> | <zero> ] )
• rotateY( [ <angle> | <zero> ] )
• rotateZ( [ <angle> | <zero> ] )

经常用到去制作loading

transition

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

作用：补充中间帧

语法

• transition: 属性名 时长 过渡方式 延迟
• transition属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。 eg transition:left 200ms, top 400ms
• 可以用all来代表所有属性
• 常用过渡方式有： linear | ease | ease-in | ease-out | ease-in-out 等

animation

CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

keyframe 关键帧

可以为动画变化的关键位置设置一定的顺序。

它的规则是 @keyframes 名称 {...}

有两种写法，一种是 0% - 100%，中间可以创建多个百分比给元素加上动画效果。

假设自定义 keyfram 名称为：index

@keyframes xxx {
    0% {
        /* 动画代码 */
    }
    50% {
        /* 动画代码 */
    }
    100% {
        /* 动画代码 */
    }
}
复制代码

另外一种写法是，from - to，from 相当于 0%，to 相当于100%，中间正常添加百分比。

@keyframes xxx {
    from {
        /* 动画代码 */
    }
    50% {
        /* 动画代码 */
    }
    to {
        /* 动画代码 */
    }
}
复制代码

缩写语法

animation : 动画名 | 持续时间 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 ；

• 持续时间： 1S 或者 1000ms （单位可用s和ms）
• 过渡方式： 跟transition取值一样
• 次数： 3 或 2.1 或者 infinite（无限循环）
• 方向： reverse | alternate（偶数次反向播放、奇数次正向播放） | alternate-reverse（alternate反之）
• 填充： none | forwards | backwards | both
  • forwards ： 当动画完成后，保持最后一个属性值，（在最后一个关键帧中定义）
• 是否暂停： paused | running

想说的一些话

其实CSS 和 画画一样， 不需要逻辑， 需要你有抽象思维，利用这些常用的属性加上你的想象足以可以绘制一个漂亮的画面。