本文详细介绍了CSS动画中的三个关键属性：transition（过渡）、Animation（动画）以及它们的属性如transition-property、duration、timing-function和delay。并通过代码示例展示了如何在鼠标悬停事件中实现渐变效果和transform转换。
一、制作动画三大属性：
transform转换、transition过渡、Animation动画
（transition过渡是手动的、Animation动画是自动的）
二、过渡属性介绍：
（1）transition-property 过渡属性
属性值：all （所有属性获得过渡效果）/ none （没有属性获得过渡效果） / property（width、height、background-color...）指定的css属性运用过渡效果，多个属性用逗号隔开
（2）transition-duration 一个属性过渡到另一个属性所需的时间
属性值：...s（可指定一个值或多个值，多个值用逗号隔开）
（3）transition-timing-function 定义速度类型（运动方式）
属性值：linear （匀速） / ease （默认，由慢到快到慢）/ ease-in （越来越快）/ ease-out （越来越慢） / ease-in-out（以慢速开始和结束） / cubic-bezier（1,0.58,2,4 自定义值，通过 cubic-bezier 来规定速度曲线）
（4）transition-delay 动画延迟时间（何时开始）
属性值：...s
（5）transition复合写法 四个属性
transition:property(过渡属性)、duration(时间)、timing-function(运动方式)、delay(延迟时间);
（四个属性，除了前面的为过渡总时间duration，后面的使过度延时时间delay之外 没有顺序前后之分）
三、代码示例
<body>
<div></div>
</body>div{
background-color: red;
width: 200px;
height: 200px;
}
div:hover{
background-color: yellow;
transition: all 2s linear 0.5s;
transform:matrix(0.6,0,0,1,400,100);//运用之前的知识添加transform转换
//沿着x轴方向缩小0.6倍，向x轴位移400px，向y轴位移100px
}点击前：
点击后：经历0.5s后逐渐变黄
4285
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
