CSS3 애니메이션에는 어떤 속성이 있습니까?

body { background-color: #fff; color: #555; font-size: 1.1em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } .container { margin: 50px auto; min-width: 320px; max-width: 500px; } .element { margin: 0 auto; width: 100px; height: 100px; background-color: #0099cc; border-radius: 50%; position: relative; top: 0; -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite; } @-webkit-keyframes bounce { from { top: 100px; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 25% { top: 50px; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 50% { top: 150px; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 75% { top: 75px; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { top: 100px; } } @keyframes bounce { from { top: 100px; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 25% { top: 50px; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 50% { top: 150px; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 75% { top: 75px; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { top: 100px; } }