Animations and the Anatomy of Keyframes

bouncing arrow animation from example code

Here’s a simple example:

// style.css.arrow {
position: relative;
animation: bounce 2s infinite;
color: #F18F43
}
@keyframes bounce {
0%(top: 0px;)
60%(top: 20px; color: #E16541)
100%(top: 0px;)
}

Breaking it down:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store