Getting Fancy - Jump Start CSS - page 153

.logo {
float: left;
margin-left: 145px;
margin-top: -34px;
position: relative;
top: 34px;
transform: translateX(-800%);
animation: logomove 2s ease-out 1s 1 normal forwards;
}
Here we've added two new lines to the .logo rule set. First, we're using a translateX()
transform to move the logo element off the page. We use a negative percentage value to
achieve this.
The next line is a new property―the animation property, which is a shorthand property. Let's
look at what properties this shorthand represents:
animation-name
Inourexample,we'vedefinedtheanimationnameas logomove .Thispropertyaccepts
a custom name of our choosing. This name will be used again later in the animation key-
frames code.
animation-duration
This is the amount of time we want the animation to take, from beginning to end, for
each time that the animation runs. As with the duration on a transition, this takes a time
value in seconds or milliseconds.
animation-timing-function
This is exactly the same as the timing functions for transitions, including ease , ease-
out , linear , and so on. We're using ease-out in this animation.
animation-delay
The delay, which is another time value in seconds or milliseconds, tells the browser how
long to wait before the first iteration of the animation. In order to have a delay, we must