.div_b{
width: 100%;
height: 100px;
background-color: red;
animation-name: example_b;
animation-duration: 5s;
/* loops... */
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes example_b{
from {background-color: red;}
to {background-color: yellow;}
}
<p class="p1">
When an animation is finished, it goes back to its original style.
<p>
In this example, the style for the <p> element specifies that the animation should take 5 seconds to execute from start to finish,
using the animation-duration property and that the name of the @keyframes at-rule defining the keyframes for the animation sequence is slide-in:
.p1 {
animation-duration: 5s;
animation-name: slide-in; /*name */
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes slide-in { /*name */
from {
translate: 150vw 0;
scale: 200% 1;
}
to {
translate: 0 0;
scale: 100% 1;
}
}
</style>
In this case, we have just two keyframes. The first occurs at 0% (using the alias from). Here, we configure the translate property of the element to be at 150vw (that is, beyond the far right edge of the containing element), and the scale of the element to be 200% (or two times its default inline size), causing the paragraph to be twice as wide as its <body> containing block. This causes the first frame of the animation to have the header drawn off the right edge of the browser window.
The second keyframe occurs at 100% (using the alias to). The translate property is set to 0% and the scale of the element is set to 1, which is 100%. This causes the header to finish its animation in its default state, flush against the left edge of the content area.