<!DOCTYPE html><html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???????????????<style type="text/css"> ???????div{/*在div中设置动画效果名为"dh",动画时间为20s,无限执行,正反交替，速度先快后慢*/ ???????????animation: dh 20s infinite alternate ease; ???????????/*设置定位方式为绝对定位*/ ???????????position: absolute; ???????} ???????????????????@keyframes dh{ ???????????????/*在初始状态中要求盒子是宽为200px,高为200px,背景颜色为蓝色的正方形*/ ???????????????0%{ width: 200px;200px;background-color: blue; margin: 0px 0px;} ???????????????/*在25%时间的时候,盒子向右移动500px,变成直径为150px,背景颜色为红色的圆*/ ???????????????25%{width: 150px;height: 150px;border-radius: 50%;background-color: red;margin:0 500px;} ???????????????/*在50%时间的时候,盒子向下移动500px,产生灰色阴影*/ ???????????????50%{width: 150px;height: 150px;border-radius: 50%;background-color: red; margin:500px 500px;box-shadow: 10px 10px gray;} ???????????????/*在75%时间的时候,盒子向左移动500px,变成正方形，同时颜色变为橘色*/ ???????????????75%{width: 150px;height: 150px;;background-color: orange;margin:500px 0px;} ???????????????/*结束时变回原来的蓝色正方形*/ ???????????????100%{width: 150px;height: 150px;background-color: blue; } ???????????????} ???????????????????</style> ???</head> ???<body> ???<!-- ???在body中设置一个div--> ???????????<div ></div> ???</body></html>css-4（动画）
原文地址：https://www.cnblogs.com/zhangrui0328/p/8707610.html