Two Simple CSS Animations to Try

Adding animations to your website can be an effective way to attract attention where you want it. Websites can display an incredible amount of information all at once. If you open Amazon right now you can see two bars at the top of the page, on containing info about you and one for navigation. Below that is probably an in-house advertisement for one of Amazon’s services like Audible, Prime Video, Alexa products, or Twitch / Prime Gaming. Below that are your recent orders, something you looked at recently and didn’t purchase, followed by two more Amazon ads, I got one for Prime Video and on for Prime Fresh. That’s a lot of info. Where does the user look first? That depends on the user of course. If they know what they’re looking for and are familiar with the website they may know exactly where to look. If they’re a new user their eyes might be attracted to pictures, bright colors, or motion. What if the user is familiar with the site but isn’t completely sure or focused on their objective, maybe they’re just browsing, again colors, motion, and images are going to be very effective at attracting attention. This is one of the strength of animations. personally I like sleek and subtle animations that present info in an elegant manor where it almost flows. I cannot deny the attention grabbing effects of animations and I’m going to show you two that might help you get that attention where you want it.

Pulse

#App.js
import 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;
  }
}

The pulse animation will transition from the first color, at 0%, to the second color, at 100%. The transition is a gradual blend from the first color to the second. When we declare the animation as pulse, we follow that by an interval of time that represents the amount of time it take the animation to transition from 0% to 100%. Once the animation reaches 100% it restarts from 0% again. This is due to the infinite keyword that follows the integer representing the transition time. If we change the percentages a little we can make this animation look like it never ends.

@keyframes pulse {
  0% {
    background-color: #960396;
  }
  50% {
    background-color: #47ff36;
  }
  100% {
    background-color: #960396;
  }
}

This can be a really useful way to grab a user’s attention. Try to be creative with your application of the animation. I recommend either making small or very slow. It can be very overwhelming if the background of your website is a high value color and changes very quickly. I like to use animations on things like borders to add a bit of flair to an element on my website. It’s very good attracting attention as well as keeping the users eye moving and exploring your site.

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;
  }
}

The stretch animation will take an object and enlarge it. First you need to establish the size of the shape by declaring the height and width. Then add a background color, maybe one that corresponds to the theme of your site, or something contrasting so that it’ll pop. Don’t forget to set the animation to stretch. Then, just like we did for the pulse animation, declare a duration for the animation (the length of time you want the animation to last). I showed you how to make the pulse animation seem infinite above but you could always use animation-direction: alternate; there’s almost always more than one way to achieve the same effect so always experiment. Then we set the animation-iteration-count: infinite;so that it continuously loops from start to finish.

If your new to animations or even a little intimidated by them I definitely suggest giving these two a try. Play around with the duration and direction, you can even change the colors and the shapes. If you’re feeling confident about them try combining them, so you have a stretch and pulse animation together.