css 动画 transition 和 animation

CSS动画详解

最新推荐文章于 2025-01-02 15:01:46 发布

迁于乔木

最新推荐文章于 2025-01-02 15:01:46 发布

阅读量185

点赞数

CC 4.0 BY-SA版权

分类专栏： css+html基础文章标签： css动画 animation transition

本文链接：https://blog.youkuaiyun.com/qq_15365411/article/details/80110039

7 篇文章

订阅专栏

本文详细介绍了CSS动画中的两种主要形式：补间动画与帧动画。补间动画通过transition属性结合transform属性实现，包括平移、缩放、旋转及倾斜等效果。帧动画则利用animation属性制作更为复杂的动态效果。

css动画分两种

1.补间动画用 transition 结合transform使用

transition:

transition-property 属性

transition-duration 持续时间

transition-timing-function 动效默认值ease

transition-delay 延迟时间

例如：

transition：all 2s;

二维变换

@1. translate 设置偏移

transform：translate（x,y）x表示x方向 y表示y方向

transform：translateX（x），参考计算的单位是元素本身

可通过这个设置元素水平，垂直居中

.demo {
  position: absolute;
  top: 50%; /* 父元素高度的一半位置 */
  left: 50%; /* 父元素宽度的一半位置 */
  transform: translate(-50%, -50%); /* 元素本身的一半宽、高 */
}

@2. scale 缩放

transform: scale(sx[, sy])

.box {
    transform: scale(1.2);
}

@3. rotate 旋转顺时针角度

其语法为：transform: rotate(angle)。angle 表示顺时针角度。

简单示例如下：

.box {
    transform: rotate(15deg);
}

@4. skew 逆时针旋转

其语法为：transform: skew(ax[, ay])。其中 ax 表示 x 方向的顺时针角度，ay 表示 y 方向的顺时针角度，如果 ay 没有指定值则 y 方向没有倾斜。

简单示例如下：

.box {
    transform: skew(30deg);
}

综合使用的复杂变换

.box {
    transform: translate(30px) rotate(10deg) skew(0, 5deg);
}

2.帧动画 animation