HTML and CSS Reference
In-Depth Information
.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:
Inourexample,we'vedefinedtheanimationnameas logomove .Thispropertyaccepts
a custom name of our choosing. This name will be used again later in the animation key-
frames code.
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.
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.
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
Search WWH ::

Custom Search