css动画transition、transform、animation

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

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

css动画transition、transform、animation

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%;
        }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值