动画

Tue, 08 Oct 2024 00:00:00 +0800

前言

CSS中有几个特别相近的几个属性。他们是transition,transform,animation。可能还有人对translate是什么也不清楚，那我们先给个简单的介绍。

属性	含义
transition 过渡	用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
transform 变形	用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”
animation 动画	css动画属性
translate 移动	只是transform的一个属性值，即移动。

transition 过渡

字面意思上来讲，就是元素从这个属性(color)的某个值(red)过渡到这个属性(color)的另外一个值(green)，这是一个状态的转变，需要一种条件来触发这种转变，比如我们平时用到的:hoever、:focus、:checked、媒体查询或者JavaScript。

一条transition规则，是可以定义多个属性的变化的，中间用逗号隔开，如果是全部属性变化则用“all”即可。

语法：transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称
transition-duration	规定完成过渡效果需要多少秒或毫秒
transition-timing-function	规定速度效果的速度曲线
transition-delay	定义过渡效果何时开始

我发现简写时候的顺序并不一定就是写死的，经过测试在chrome上只要delay在duration后面即可。当然按照标准写是最好的。

Demo

<!DOCTYPE html>
<html lang="en">
<head>
 <title>transition</title>
 <style>
 #box {
 height: 100px;
 width: 100px;
 background: green;
 transition: transform 1s ease-in 1s;
 }

 #box:hover {
 transform: rotate(180deg) scale(.5, .5);
 }
 </style>
</head>
<body>
 <div id="box"></div>
</body>
</html>

效果

动画 on Last Stand

动画

前言

transition 过渡

Demo