CSS 变换、过渡和动画基本用法

transform

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

注：内联元素不支持变换，需要编程块

常用功能属性

• Offsettranslate
• Scale
• rotate

偏移翻译 常用的写法

• translate( , ? )
• translateX( )❀> )
• translateZ( 和父容器必须有属性 perspective)
• translate3d(x,y,z),-%经常使用translate,-%配合定位实现元素的水平和垂直居中

  刻度 scale 常用书写方法

  • scale ( , ? )()X scaleY( )

  旋转旋转 常用

  • rotate3d( , , , [ )>rotateX( [ | ] )
  • rotateY( [ | ] )
  • rotateY( [ | ] ] )
  • rotateZ( [ | ] )

  常用于创建加载

  transition

  过渡CSS属性是transition-property的简写transition-duration，transition -定时功能和转换延迟。

  功能：补充中间帧

  语法

  过渡：属性名称 ❀ 过渡Method 延迟 转换属性可以指定为一个或多个 CSS 属性，以逗号分隔。例如transition: left 200ms, top 400ms

• 可以用all来表示所有属性
• 常见的transition方式有：线性|轻松|轻松 |缓出 | escape-in​​-out 等

animation

CSS 动画属性是animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-properties 的简写属性形式对于方向、animation-fill-state 和animation-play-state 。

关键帧 关键帧

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

规则是@keyframe的名字{...}

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

假设自定义关键帧名称为：index

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

另一种写法是from - to，from等于0%，to等于100%，中间一般会加上百分比。

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

缩写语法

animation: 动画名称 |持续时间|过渡方法|延迟|次 |方向 |填充模式|是否休息；

• 持续时间：1S或1000ms（单位有s和ms）
• 过渡方法：与过渡值相同
• 次数：3或2.1或无限（无限❝方向） |交替（偶数反向播放，奇数向前播放）| alternate-reverse（交替和反向） )
• 填充：无 |向前|向后|两者
  • forward：当动画完成时，保留最后一个属性值（在最后一个关键帧中定义）
• 关于暂停：暂停|跑步

一些话我想说

其实CSS就像画画。它不需要逻辑。它需要你有抽象思维。利用这些共同的特征和你的想象力就足以画出一幅美丽的图画。

作者：pfzzz
链接：https://juejin.cn/post/6897178216189034510
来源：掘金属于作者所有。商业转载请联系作者获取授权。非商业转载请注明出处。