transition-delay 设置过渡延迟时间
transition-duration 设置完成过渡效果需要花费的时间
transition-timing-function 设置过渡效果的速度曲线
transition 设置过渡属性的复合写法
transform-origin 设置旋转元素的基点位置(不常用,了解即可)
transform-style 让转换的子元素保留3D转换(不常用,了解即可)
opacity 设置元素的透明度
@keyframes 设置关键帧动画
animation 设置动画属性
要在CSS中实现上下门的移动效果,你可以使用CSS的transform属性来设置门的位移效果。以下是一个简单的例子,假设你有一个类名为door的HTML元素,希望实现上下移动效果:
Copy code.door { transform: translateY(-100px) transition: transform 1s
}.door.open { transform: translateY(0)
}
在上面的CSS代码中,我们使用了transform属性的translateY方法来实现垂直移动,并使用了transition属性来设置动画过渡效果。我们还定义了一个类名为open的状态,在这个状态下,门的位置会发生改变,从而实现上下移动的效果。
要在HTML代码中触发这个状态,你可以使用JavaScript来添加或删除open类名:
Copy codedocument.querySelector('.door').classList.add('open')document.querySelector('.door').classList.remove('open')
希望这些信息能帮助你实现所需的上下门移动效果。
| 值 | 描述 || animation-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间,以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
animation-fill-mode : none | forwards | backwards | both
/*none:不改变默认行为。
forwards :当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards:在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both:向前和向后填充模式都被应用。 */
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transform-origin: bottom right/* 设置旋转点,默认是中心点 */
参考