???<style> ???????.animation { ???????????width: 30px; ???????????height: 30px; ???????????animation: change 5s infinite; ???????} ???????/*动画相比过渡可以控制更多细节，可以将一个动画拆成多个步骤*/ ???????@keyframes change { ???????????0% { ???????????????width: 30px; ???????????????height: 30px; ???????????????background-color: yellow; ???????????} ???????????/*25% { ???????????????width: 300px; ???????????????background-color: blue; ???????????}*/ ???????????50% { ???????????????width: 30px; ???????????????height: 300px; ???????????????background-color: green; ???????????} ???????????100% { ???????????????width: 300px; ???????????????height: 300px; ???????????????background-color: pink; ???????????} ???????} ???</style></head><body> ???<div class="animation"></div></body></html>跳动的球：
1 ?<style> 2 ????????.ball { 3 ????????????width: 200px; 4 ????????????height: 200px; 5 ????????????margin-left: -100px; 6 ????????????border-radius: 100px; 7 ????????????background-color: blue; 8 ????????????background-image: radial-gradient(140px at center 40px, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6)); 9 ????????????position: absolute;10 ????????????left: 50%;11 ????????????top: 30px;12 ????????????animation: move 1.5s ?infinite;13 ????????}14 15 ????????.ball-wrap::after {16 ????????????content: ‘‘;17 ????????????display: block;18 ????????????position: absolute;19 ????????????left: 50%;20 ????????????bottom: 200px;21 ????????????width: 200px;22 ????????????height: 10px;23 ????????????margin-left: -100px;24 ????????????border-radius: 100px/5px;25 ????????????background-color: #CCC;26 ????????}27 28 29 ????????@keyframes move {30 ????????????0% {31 ????????????????top: 30px;32 ????????????}33 34 ????????????50% {35 ????????????????top: 180px;36 ????????????}37 38 ????????????100% {39 ????????????????top: 30px;40 ????????????}41 ????????}42 ????</style>43 </head>44 <body>45 <div class="rotate"></div>46 <div class="ball-wrap">47 ????<div class="ball"></div>48 </div>49 </body>倾斜45的矩形变圆
1 <style> 2 ????????.rotate { 3 ????????????width: 200px; 4 ????????????height: 200px; 5 ????????????margin: 200px auto; 6 ????????????background-color: yellow; 7 ????????????transform: rotate(45deg); 8 ????????????animation: move 2s infinite; 9 ????????}10 11 ??????????@keyframes move {12 ????????????????????0% {13 ????????????????????????top: 30px;14 ????????????????????}15 16 ????????????????????50% {17 ????????????????????????top: 180px;18 ????????????????????}19 20 ????????????????????55% {21 ????????????????????????top: 190px;22 ????????????????????}23 24 ????????????????????65% {25 ????????????????????????top: 190px;26 ????????????????????}27 28 ????????????????????95% {29 ????????????????????????height: 190px;30 ????????????????????????border-radius: 100px/95px;31 ????????????????????????top: 30px;32 ????????????????????}33 34 ????????????????????100% {35 ????????????????????????height: 190px;36 ????????????????????????border-radius: 100px/95px;37 ????????????????????????top: 30px;38 ????????????????????}39 40 ????????????????}41 ????</style>42 </head>43 <body>44 <div class="rotate"></div>45 </body>旋转/缩放/倾斜/移动
1 ????.wrapper .wrap-box { 2 ????????????padding: 20px; 3 ????????} 4 ?5 ????????.box { 6 ????????????width: 200px; 7 ????????????height: 200px; 8 ????????????background-color: yellow; 9 ????????????transition: all 1s;10 11 ????????}12通过 rotate() 方法，元素可以实现旋转效果，允许负值，元素将逆时针旋转。
使用方法如：transform: rotate(45deg)、transform: rotate(-90deg)
13 ????????/*旋转*/14 ????????.rotate:hover .box {15 ????????????transform: rotate(360deg);16 ????????}17 ????18 ????????/*缩放*/19 ????????.scale:hover .box {20 ????????????transform: scale(0.5);21 ????????}22 23 ????????/*倾斜*/24 ????????.skew .box {25 ????????????transform: skew(45deg);26 ????????}27 28 ????????/*移动*/29 ????????.translate:hover .box {30 ????????????transform: translate(400px) rotate(90deg) scale(1.5);31 ????????}点击按钮，增加样式做动画
1 <style> 2 ????????body { 3 ????????????margin: 0; 4 ????????????padding: 0; 5 ????????} 6 ?7 ????????.demo { 8 ????????????width: 200px; 9 ????????????height: 200px;10 ????????????background-color: blue;11 ????????????12 ????????}13 14 ????????.child {15 ????????????width: 30px;16 ????????????height: 30px;17 ????????????background-color: yellow;18 ????????????transition: all 1s;19 ????????}20 21 ????????.current .child {22 ????????????width: 120px;23 ????????????height: 120px;24 ????????}25 ????</style>26 </head>27 <body>28 ????<div class="demo">29 ????????<div class="child"></div>30 ????</div>31 ????<button id="btn">换色</button>32 ????<script>33 ????????var button = document.getElementById(‘btn‘);34 ????????var demo = document.querySelector(‘.demo‘);35 36 ????????button.addEventListener(‘click‘, function () {37 ????????????demo.classList.add(‘current‘);38 ????????})39 ????</script>动态进度条：改变left值；
1 <style> 2 ????????body { 3 ????????????margin: 0; 4 ????????????padding: 0; 5 ????????} 6 ?7 ????????.demo { 8 ????????????width: 200px; 9 ????????????height: 200px;10 ????????????background-color: blue;11 ????????????12 ????????}13 14 ????????.child {15 ????????????width: 30px;16 ????????????height: 30px;17 ????????????background-color: yellow;18 ????????????transition: all 1s;19 ????????}20 21 ????????.current .child {22 ????????????width: 120px;23 ????????????height: 120px;24 ????????}25 ????</style>26 </head>27 <body>28 ????<div class="demo">29 ????????<div class="child"></div>30 ????</div>31 ????<button id="btn">换色</button>32 ????<script>33 ????????var button = document.getElementById(‘btn‘);34 ????????var demo = document.querySelector(‘.demo‘);35 36 ????????button.addEventListener(‘click‘, function () {37 ????????????demo.classList.add(‘current‘);38 ????????})39 ????</script>GET()将jq对象转换为dom;
音乐键盘：
1 ??<script type="text/javascript"> 2 ?????????????$(function() { 3 ?????????????????$("nav li:last").css("border",0); 4 ?????????????????// 隐式迭代 5 ?????????????????// a.append(b) ????// ?把 b 放到 a 里面 6 ?????????????????$("nav li").append("<ins></ins>"); 7 ?????????????????var arr = new Array("red","blue","green","yellow","pink","deeppink","orange","purple"); 8 ?????????????????$("nav li ins").each(function(index,ele) { // ?for 9 ????????????????????????$(this).css("background-color",arr[index]);10 ?????????????????})11 12 ?????????????????$("nav li").mouseenter(function() {13 ?????????????????????$(this).children("ins").stop().animate({top:0},200);14 ?????????????????????$("audio").get($(this).index()).load(); ?// 加载15 ?????????????????????$("audio").get($(this).index()).play(); ?// 播放16 ?????????????????}).mouseleave(function() {17 ?????????????????????$(this).children("ins").stop().animate({top:35},200);18 ?????????????????})19 ?????????????????// 键盘事件20 ?????????????????$(window).keydown(function(event) { ??// 事件对象21 ????????????????????// alert(event.keyCode); // ?返回该键盘的 ?unicode ?编码22 ???????????????????/* ?if(event.keyCode == 13)23 ?????????????????????{24 ?????????????????????????alert("您按了回车")25 ?????????????????????}*/26 ?????????????????????var num = 0 ;27 ?????????????????????if(event.keyCode>=49 && event.keyCode<=56) {28 ?????????????????????????/*比如 我按了 ?1 键盘 ??应该 第 0 个li操作29 ?????????????????????????比如 我按了 ?2 键盘 ??应该 第 1 个li操作 */30 ?????????????????????????num = event.keyCode - 49;31 32 ?????????????????????????$("nav li").eq(num).trigger("mouseenter"); ?// 事件触发33 ?????????????????????????setTimeout(function() {34 ?????????????????????????????$("nav li").eq(num).trigger("mouseleave"); ?// 事件触发35 ?????????????????????????} ,300)36 37 ?????????????????????}38 ?????????????????})39 40 ?????????????})41 ?????</script>泡泡上下切换：
1 v <style> 2 ????????body { 3 ????????????background-color: pink; 4 ????????} 5 ????????.pop { 6 ????????????width: 350px; 7 ????????????height: 100px; 8 ????????????margin: 100px auto; 9 ????????????background: url(images/paopao.png) no-repeat top left,10 ????????????url(images/paopao.png) no-repeat right bottom #369;11 ????????????border-radius: 15px;12 ????????????transition: all 1s;13 ????????}14 15 ????????.pop:hover {16 ????????????background-position: right bottom, top left;17 ????????}18 ????</style>19 </head>20 <body>21 ????<div class="pop"></div>22 </body>360度旋转：
1 ??<style> 2 ????????div { 3 ????????????display: inline-block; 4 ????????????transition: all 0.5s; 5 ????????} 6 ????????.rotateDiv { 7 ????????????transform: rotate(360deg); 8 ????????} 9 ????</style>10 ????<script src="jquery-1.11.1.min.js"></script>11 ????<script type="text/javascript">12 ???????$(function() {13 ???????????$("div").on("click",function() {14 ????????????????$(this).toggleClass("rotateDiv");15 ???????????})16 ???????})17 ????</script>18 </head>3D转换音乐盒：
1 <style> 2 ????????body { 3 ????????????margin: 0; 4 ????????????padding: 0; 5 ????????????background-color: #FFF; 6 ????????} 7 ?8 ????????.music-box { 9 ????????????width: 300px;10 ????????????height: 300px;11 ????????????margin: 50px auto;12 ????????????position: relative;13 ????????}14 ????????15 ????????.music-box::after, .music-box::before {16 ????????????content: ‘‘;17 ????????????position: absolute;18 ????????????width: 100%;19 ????????????height: 100%;20 ????????????border-radius: 150px;21 ????????}22 23 ????????.music-box::after {24 ????????????background: url(./images/musicb.jpg);25 ????????????border-radius: 150px;26 ????????????border: 1px solid #CCC;27 ????????????transform-origin: center bottom;28 ????????????transition: all 1s;29 ????????}30 31 ????????.music-box::before {32 ????????????background: url(./images/musict.jpg);33 ????????}34 35 ????????.music-box:hover::after {36 ????????????transform: rotateX(-180deg);37 ????????}38 ????</style>39 </head>40 <body>41 ????<div class="music-box"></div>42 </body>百度钱包：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>CSS3 3D转换</title> ???<style> ???????body { ???????????margin: 0; ???????????padding: 0; ???????????background-color: #B3C04C; ???????} ???????.wallet { ???????????width: 300px; ???????????height: 300px; ???????????margin: 50px auto; ???????????position: relative; ???????} ???????.wallet::before, .wallet::after { ???????????content: ‘‘; ???????????position: absolute; ???????????left: 0; ???????????top: 0; ???????????width: 100%; ???????????height: 100%; ???????????border-radius: 150px; ???????????backface-visibility: hidden;
定义和用法
backface-visibility 属性定义当元素不面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时，该属性很有用。
???????????transition: all 0.6s; ???????} ???????.wallet::before { ???????????background: url(./images/bg.png) left top; ???????????transform: rotateY(0deg); ???????} ???????.wallet::after { ???????????background: url(./images/bg.png) right top; ???????????transform: rotateY(180deg); ???????} ???????.wallet:hover::before { ???????????transform: rotateY(180deg); ???????} ???????.wallet:hover::after { ???????????transform: rotateY(0deg); ???????} ???</style></head><body> ???<div class="wallet"></div></body></html>
CSS3动画
原文地址：https://www.cnblogs.com/yangguoe/p/8490593.html