Two Simple CSS Animations to Try

Pulse

#App.jsimport React from 'react'
import './App.css';
function App() {
return (
<div class="animation">
</div>
)
}
export default App;
#App.css
.animation {
width: 100vh;
height: 100vh;
animation: pulse 10s infinite;
}
@keyframes pulse { 0% {
background-color: #960396;
}
100% {
background-color: #47ff36;
}
}
@keyframes pulse {  0% {
background-color: #960396;
}
50% {
background-color: #47ff36;
}
100% {
background-color: #960396;
}
}

Stretch

body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.animation {
height: 300px;
width: 300px;
background-color: blue;
animation-name: stretch;
animation-duration: 1.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
@keyframes stretch { 0% {
transform: scale(.3);
background-color: blue;
border-radius: 100%;
}
50% {
background-color: green;
}
100% {
transform: scale(1.5);
background-color: yellow;
}
}

--

--

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