How to use animation feature in CSS3?

[bintje]

Hi everyone, I'm newbie in CSS3 and really facinated by its animation features.

I would like to achieve the animation effect in this page:http://www.skyhallfence.com/, can anyone tell me know to do that?

Really thank you guys.

[NetGuru87]

I dont think this is done with CSS3 - i think its mostly Jquery.

 

As an example try hovering your mouse over the text in here: http://jsfiddle.net/gkw8n/

[asianmartt]

Use this code and get demo of animation feauture in css3 :

@keyframes resize {
  0% {
    padding: 0;
  }
  50% {
    padding: 0 20px;
    background-color:rgba(255,0,0,0.2);
  }
  100% {
    padding: 0 100px;
    background-color:rgba(255,0,0,0.9);
  }
}

#box {
  animation-name: resize;
  animation-duration: 1s;
  animation-iteration-count: 4;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

[BuildMyWeb]

i havent looked into the example you linked bintje but you certainly could achieve most, if not all, of thsoe animations with CSS3:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

https://css-tricks.com/almanac/properties/a/animation/

 

animations are tricky to work with in the current browser environment.  they are not fully supported yet and such.  i know of particular issues with mobile IOS 8.x.x.