一、制作动画三大属性:
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后逐渐变黄