CA 2 - Site elements part 2

Animate CSS

I wanted to use some css3 animations in the site. I came across this css library of cool animations already coded for you.  src

All you have to do is link the file and then give the element you want animated the class name of the animation. I gave my logo a bounce and drop in animation. I only used this on the homepage as I found the trick to using these animations is in moderation. I also gave the live link a bounce animation to bring the viewers attention to it. When the link is rolled over , I have jquery hide the tooltip.

the HTML : 



<div class="visit-bubble animated bounce">
       
         <p>Check out the live site</p>

</div>


the CSS : 


@-webkit-keyframes bounce {
0%,100% {-webkit-transform: translateY(0);}

60% {-webkit-transform: translateY(-5px);}
}

@-moz-keyframes bounce {
0%,100% {-moz-transform: translateY(0);}
40% {-moz-transform: translateY(-10px);}
60% {-moz-transform: translateY(-5px);}
}

@-o-keyframes bounce {
0%,100% {-o-transform: translateY(0);}
40% {-o-transform: translateY(-10px);}
60% {-o-transform: translateY(-5px);}
}
@keyframes bounce {
0%,100% {transform: translateY(0);}
40% {transform: translateY(-10px);}
60% {transform: translateY(-5px);}
}

.bounce {
-webkit-animation-name: bounce;
-moz-animation-name: bounce;
-o-animation-name: bounce;
animation-name: bounce;
-webkit-animation-iteration-count: infinite;
}

I changed the amount it translates by 5px and also the iteration-count, it now plays forever. I added a bit of javascript so that when a user scrolls over the button the animation disappears. 

Font Awesome

For the about page I wanted a way of displaying my skill sets and interests. I came across font awesome src

I used the star ratings for my skill sets and the hearts for my interests. To get it to work you just link the CSS sheet and include the fonts. 

HTML

<p>CSS/SASS <i class="icon-star-half"></i><i class="icon-star"></i><i class="icon-star"></i><i class="icon-star"></i></p>

I altered the colour to match my colour scheme.