Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jaber Salehi
Jaber Salehi
Courses Plus Student 11,888 Points

CSS Animation of the "Resume Icon" In treehouse

Hi,

Resume Icon

There's a cool animation around the resume icon, Just wanted to know how they did it.

It's awesome :D

Thanks,Jey.

Andreas Anastasiades
Andreas Anastasiades
2,916 Points

Try checking inspect element in your browser and look at the :before element

You'll find this css3 animation

  animation: pulsate-outer-ring 5s ease-in-out 0s 3 forwards;
  -moz-animation: pulsate-outer-ring 5s ease-in-out 0s 3 forwards;
  -webkit-animation: pulsate-outer-ring 5s ease-in-out 0s 3 forwards;

This pulsate effect creates the pulse around the arrow

2 Answers

Jenny Veens
Jenny Veens
10,896 Points

Hi Jaber,

If you inspect the element you will see that there is a :before psuedo-element on it with these properties:

ul#account-info>li#content-suggestion-menu button#content-suggestion-cta svg.right-arrow-icon {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  border: 2px solid #5fcf80;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -13px 0 0 -13px;
  z-index: 10;
  border-radius: 50%;
  animation: pulsate-outer-ring 5s ease-in-out 0s 3 forwards;
  -moz-animation: pulsate-outer-ring 5s ease-in-out 0s 3 forwards;
  -webkit-animation: pulsate-outer-ring 5s ease-in-out 0s 3 forwards;
}

a quick google search of pulsate-outer-ring css animations lead to this: 

@-webkit-keyframes pulsate-outer-ring {

  0%, 80%, 100% {
    transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    opacity: 0;
  }
  25%,30% {
    opacity: 1;
  }
  35%,40% {
    transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    opacity: 1;
  }
  50% {
    transform: scale(1.8, 1.8);
    -webkit-transform: scale(1.8, 1.8);
    opacity: 0;
  }
}

Hope this helps!

Jaber Salehi
PLUS
Jaber Salehi
Courses Plus Student 11,888 Points
Jaber Salehi
Jaber Salehi
Courses Plus Student 11,888 Points

pulsate-outer-ring is a default css animation or it just created by @keyframes?

Andreas Anastasiades
Andreas Anastasiades
2,916 Points

Jaber,

With the keyframes you can customize the pulsate-outer-ring animation according to your wishes, change size etc...