<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????body{ ???????????background-color: black; ???????} ???????#img1{ ???????????width: 300px; ???????????height: 230px; ???????????position: absolute; ???????????left: 50%; ???????????margin-left: -150px; ???????????transform: scale(0,0); ???????????animation: img1Animation 3s forwards; ???????????animation-delay: 3s; ???????} ???????#img2{ ???????????width: 15px; ???????????height: 50px; ???????????position: absolute; ???????????left: 50%; ???????????margin-left: -7px; ???????????bottom: 0; ???????????animation: img2Animation; ???????????animation-duration: 3s ; ???????????/*animation-delay: 3s;*/ ???????????animation-fill-mode: forwards; ???????} ???????@keyframes img2Animation { ???????????0%{ ???????????????bottom: 0; ???????????????left: 50%; ???????????????margin-left: 7px; ???????????} ???????????99%{ ???????????????bottom: 540px; ???????????????transform: scale(0.5,0.5); ???????????} ???????????100%{ ???????????????transform: scale(0,0); ???????????} ???????} ???????@keyframes img1Animation { ???????????1%{ ???????????????transform: scale(0.5,0.5); ???????????????opacity:0.1; ???????????} ???????????99%{ ???????????????transform: scale(1,1); ???????????????opacity: 1; ???????????} ???????????100%{ ???????????????transform: scale(0,0); ???????????} ???????} ???</style></head><body><img id="img1" src="../img/yanhua1.png" ><img id="img2" src="../img/yanhua2.png" ></body></html>
04.CSS动画示例-->烟花
原文地址：http://www.cnblogs.com/ronghtp/p/7649950.html