css3动画animation，transition

animation demo1

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>animation动画</title><style>#div1 {width: 100px;height: 100px;background-color: pink;position: absolute;top: 10%;left: 25%;}/* 延迟1秒 动画过程3秒 infinite死循环播放 linear线性平滑播放 */.myDiv1 {animation: div1Change 3s 1s both infinite linear;}/* 动画规则 */@keyframes div1Change{0% { background-color: palegreen;width: 120px;height: 120px;}50% { background-color: darkkhaki;width: 160px;height: 160px;}100% { background-color: lightcyan;width: 220px;height: 220px;}}</style></head><body><div id="div1" οnclick="this.className='myDiv1'"></div></body>
</html>

transition demo1

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>transition demo</title><style>#div1 {background-color:honeydew;width: 200px;height: 200px;left: 30%;position: relative;/* 触发动画效果 悬浮在div上后 div变大颜色变化 然后变回来 */transition: background-color 5s 1s,width 1s 1s,height 1s 1s;}#div1:hover {background-color:coral;width: 500px;height: 500px;}</style></head><body><div id="div1"></div></body>
</html>