JSFiddle - React, Tailwind, and code Playground

by kodjoe mambi

HTML

<div id="example-element" style="animation: 3s linear 1s infinite running slidein;"></div>


<div class="element"></div>

CSS

.element {
  height: 400px;
  width: 400px;
  background-color: red;
  animation: 
    pulse 3s ease infinite alternate, 
    nudge 5s linear infinite alternate;
  border-radius: 100%;
}

@keyframes pulse {
  0%, 100% {
    background-color: red;
  }
  50% {
    background-color: orange;
  }
}

@keyframes nudge {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(150px, 0);
  }
  
  80% {
    transform: translate(-150px, 0);
  }
}


html, body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}





#example-element {
background-color: #1766aa;
margin: 20px;
border: 5px solid #333;
width: 150px;
height: 150px;
animation: slidein 3s linear 1s infinite running;
border-radius: 50%;
}

 {

animation: 3s linear 1s infinite running slidein!important;
}