CSS 动画主要通过Transition(过渡)和Animation(关键帧动画)实现,是一种非常实用和流行的网页设计技术,可以帮助用户实现丰富多彩的动画效果,提升用户体验和页面互动性。CSS 动画具有简单、轻量、易用等特点,可以在不依赖 JavaScript 或 Flash 等技术的情况下实现丰富多彩的动画效果。
过渡属性
过渡就是元素从一种样式逐渐改变为另一种的效果,一定要添加过渡持续时间才有过渡效果 transition: 要过渡的属性 【持续的时间】 延迟时间 速度类型;
transition-property: all,width,height;过渡的属性
取值:
all 过渡的所有属性
property 要过渡的属性
none 没有过渡的属性
transition-duration: 2s,1s;过渡持续的时间,必需项,不写或为0都是没有过渡
transition-delay:2s,1000ms; 过渡的延迟时间,等待几秒开始过渡
transition-timing-function: ease;过渡的速度类型
取值:
ease:默认值(慢-快-慢)
ease-in 【慢速结束】的运动 (加速)
ease-out 【慢速结束】的运动 (减速)
ease-in-out【慢速开始慢速结束】的运动(开始加速最后减速)
linear 【匀速】的运动
cubic-bezier(1. 0.16. 0. 1.02),自己定义贝塞尔曲线的速度类型