CSS样式的过渡、动画和变形

本文链接：https://blog.csdn.net/qq_48574360/article/details/116774133

本文详细介绍了CSS中的过渡、动画和变形。过渡用于实现元素样式平滑变化，涉及transition属性及其子属性的配置。动画允许元素从一种样式渐变到另一种，关键帧和@keyframes规则是其核心。变形则改变元素形状和位置，如translate、rotate和scale等函数。此外，文章还提供了一个时钟案例来展示这些概念的应用。

摘要由CSDN通过智能技术生成

CSS样式的过渡、动画和变形

一、过渡

CSS 过渡是指在设置的时间内来平滑的改变属于值。

transition用于设置过渡效果
属性值：

transition 可以同时设置过渡相关的所有属性
transition-property 执行过渡的效果
transition-duration 指定过渡效果的时间
transition-delay 过渡效果的延迟，等待一段时间后在执行过程
transition-timing-function 指定过渡时间的效果

transition-property 可选值：width,height,all 多个属性使用逗号隔开，所有属性需要过渡则用all,过度时必须要有一个有效的数值向另一个有效的数值过渡。

transition-duration：时间单位为s和ms，如2s或2000ms

transition-delay：属性值也是以时间单位，如2s或2000ms

transition-timing-function：可选值

ease 默认值，慢速开始，先加速再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速后减速
cubic-bezier() 指定时序函数，取值范围0-1
steps() 分布执行过渡效果，第二个值start表示开始之前，end表示时间过后

二、动画

动画使元素逐渐从一种样式变为另一种样式
您可以随意更改任意数量的 CSS 属性
关键帧包含元素在特定时间所拥有的样式
如需使用 CSS 动画，您必须首先为动画指定一些关键帧

如果您在 @keyframes 规则中指定了 CSS 样式，动画将在特定时间逐渐从当前样式更改为新样式。要使动画生效，必须将动画绑定到某个元素

语法：@keyframes 名称{ from{}表示开始 to{}表示结束 }

animation属性

animation-name 设置名称
animation-duration 执行时间
animation-delay 延迟时间
animation-iteration-count 动画执行的次数(infinite 无限次)
animation-direction指定动画运行时的方向(normal 默认值，正常播放 alternate 重复播放)
animation-timing-function 属性规定动画的速度曲线。
animation-play-state 执行状态(paused 动画暂停，running 动画执行)
animation-fill-mode 规定元素在不播放动画时的样式(在开始前、结束后，或两者同时)

三、变形

通过CSS来改变元素的形状或位置，不会影响到页面的布局

transform:用来设置元素的变形效果

平移：

translateX()沿着x轴方向平移
translateY()沿着y轴方向平移
translateZ()沿着z轴方向平移

旋转：

rotateX() 根据x轴旋转
rotateY()根据y轴旋转
rotateZ()根据z轴旋转

缩放：

scaleX() 水平方向缩放
scaleY() 垂直方向缩放
scaleZ() 双方向缩放

四、时钟案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">