CSS3的过渡和动画

最新推荐文章于 2023-07-27 11:05:11 发布

原创

最新推荐文章于 2023-07-27 11:05:11 发布 · 240 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #程序人生 #前端

本文详细介绍了CSS3中的转换技巧，包括translate、rotate、scale、skew和matrix等，以及它们的3D版本。此外，还探讨了transition过渡效果，解释了过渡与动画的区别，并解析了transition属性和过渡曲线。最后，简述了如何在CSS3中创建animate动画，包括@keyframes规则和元素绑定动画的过程。

过渡和动画都是CSS3的重要部分，今天有时间，了解些相关内容并记录下。
在开始之前，首先看看CSS3的转化。

转化

CSS3的转化分为以下几种：

translate 移动
rotate　旋转
scale　缩放
skew　倾斜
matrix　混合

每种转化都还有对应的3d版本

注意：闭合的内联元素不支持转化，过渡和动画：如<span>、<small>、<i>等。可以通过添加样式　display: inline-block 或　display: block　来转化成块级元素。

translate　移动

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

span {
    display: inline-block;
    transform: translate(50px,100px); /* 向下移动50像素，向右移动100像素 */
    -ms-transform: translate(50px,100px); /* IE 9 */
    -webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

rotate 旋转

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

i {
    display: block;
    transform: rotate(30deg); /* 顺时针旋转30度，负数为逆时针旋转 */
    -ms-transform: rot

最低0.47元/天解锁文章

CSS3的过渡和动画

转化

translate 移动

rotate 旋转

translate　移动