css动画transition、transform、animation

最新推荐文章于 2024-06-21 17:17:44 发布

原创最新推荐文章于 2024-06-21 17:17:44 发布

· 383 阅读

0 ·

版权

文章标签：

#css #动画 #css3

笔记专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了CSS3中用于动画的transition、transform和animation特性。transition用于平滑元素状态改变，包括持续时间、速度曲线和延迟时间等选项。transform则涉及2D和3D转换，如旋转、缩放、移动等，还提到了变换中心点对旋转效果的影响。最后，animation是更复杂的动画控制，允许创建自定义动画序列。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、transition

transition: [属性名] [持续时间] [速度曲线] [延迟时间];

过渡效果
• linear匀速过渡
• ease缓进缓出
• ease-in
• ease-out
• ease-in-out
• cublic-bezier(n,n,n,n)贝塞尔曲线

1、单个属性过渡

transition: CSS属性名1 过渡时间  过渡效果  过渡延迟时间

2、多个属性过渡

transition:  CSS属性名1  过渡时间1  过渡效果1  过渡延迟时间1 , CSS属性名2  过渡时间2  过渡效果2 过渡延迟时间 2

3、过渡事件 transitionend

var element = document.getElementById("slidingMenu");
element.addEventListener("transitionend", function(event) {
element.innerHTML = “过渡时间结束!";
}, false);

2、transform

元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜
可选参数：
• scale(x, y)定义 2D 缩放转换，元素的x,y轴进行缩放转换
• scaleX(n)定义 2D 缩放转换，元素x轴进行缩放转换
• scaleY(n)定义 2D 缩放转换，元素y轴进行缩放转换
• skew（x-angle,y-angle）定义 2D 倾斜转换，沿着 X 和 Y 轴。
• skewX(angle) 2D 倾斜转换，沿着 X 轴。（相当于Y轴做了一定角度的倾斜）
• skewY(angle) 2D 倾斜转换，沿着 Y 轴。
• angle 表示旋转的角度，单位是deg,逆时针45度 45deg;顺时针45度 -45deg
• translate(x,y)2D 移动转换，沿着 X 和 Y 轴移动元素。
• translateX(n) 2D 移动转换，沿着 X 轴移动元素。
• translateY(n) 2D 移动转换，沿着 Y 轴移动元素。
• translateZ(n) 3D 移动转换，沿着 Z 轴移动元素。
• x, y, n 表示移动的距离 (length) 。例如 200px
• 变换中心点对位移函数 translate()不其起作用
• 位移过大会导致父元素出现滚动条，此时需对父元素设置over-flow: hidden
• rotate(angle) 2D 旋转，沿Z轴旋转角度
• 改变变换中心点的位置，可以实现不同的旋转效果
• rotateX（angle）3D 旋转，沿X轴旋转角度,
• rotateY（angle）3D 旋转，沿Y轴旋转角度

3、animation

@keyframes mykeyframes {
        from{
            background-color: orange;
        }
        20%{
            background-color:  blue;
        }
        50%{
            background-color:  red;
            transform: scale(.5);
        }
        to{
            background-color:  green;
            transform: scale(2);
        } 
    }
    //from{} = 0%{}
    //to{}=100%{}
    0%, 90%{
            background: url("img/1.png") no-repeat;
            background-size: 100%;
        }