doc_keyframeanimation.css (1386B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 .box { 6 height: 50px; 7 width: 50px; 8 } 9 10 .circle { 11 width: 20px; 12 height: 20px; 13 border-radius: 10px; 14 background-color: #ffcb01; 15 } 16 17 #pacman { 18 width: 0; 19 height: 0; 20 border-right: 60px solid transparent; 21 border-top: 60px solid #ffcb01; 22 border-left: 60px solid #ffcb01; 23 border-bottom: 60px solid #ffcb01; 24 border-top-left-radius: 60px; 25 border-bottom-left-radius: 60px; 26 border-top-right-radius: 60px; 27 border-bottom-right-radius: 60px; 28 top: 120px; 29 left: 150px; 30 position: absolute; 31 animation-name: pacman; 32 animation-fill-mode: forwards; 33 animation-timing-function: linear; 34 animation-duration: 15s; 35 } 36 37 #boxy { 38 top: 170px; 39 left: 450px; 40 position: absolute; 41 animation: 4s linear 0s normal none infinite boxy; 42 } 43 44 #moxy { 45 animation-name: moxy, boxy; 46 animation-delay: 3.5s; 47 animation-duration: 2s; 48 top: 170px; 49 left: 650px; 50 position: absolute; 51 } 52 53 @-moz-keyframes pacman { 54 100% { 55 left: 750px; 56 } 57 } 58 59 @keyframes pacman { 60 100% { 61 left: 750px; 62 } 63 } 64 65 @keyframes boxy { 66 10% { 67 background-color: blue; 68 } 69 70 20% { 71 background-color: green; 72 } 73 74 100% { 75 opacity: 0; 76 } 77 } 78 79 @keyframes moxy { 80 to { 81 opacity: 0; 82 } 83 }