Animation
As I progress with my website design I find that I am inadvertently adding some animations. This is in relation to image handling, page layout and responsive design and possibly in the future just some animation for the sake of it!
Terms:
- @keyframes
- Animation-properties - name, duration, delay etc
- animation - A shorthand property for setting all the animation properties
At a first look the use of the -webkit prefix is not clear. The Stackoverflow link below might give some insight into this. The answer seems to be "no" but why not add the code anyway.
My code and the W3C example for a slideshow gallery have the -webkit-animation-duration (etc) prefix. See gal.css and slides.html
The CSS for the animantion
-webkit-animation-duration: 1.5s;
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
The @keyframes Rule
....binds an animation to an element
To get an animation to work, you must bind the animation to an element. In the example below the animation is "bound" to the body> element.
You can also "bind" the animation in Element class declaration
Backgroud Colour
Taking an example from the W3C site: I changed the colours and timings for effect
The W3C.css colour classes also take presidence if set.
The CSS for the background animation
body {
animation-name: example;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes example {
from {background-color: yellow ;} /* */
to {background-color: green ;}
}