CSS3 animations. Повтряем примеры из документации

Чтобы понять, как это использовать, надо это попробовать. Здесь ва примера и ссылки на все свойства и примеры из документации.

CSS3 animations allows animation of most HTML elements without using JavaScript or Flash!
Specify the Speed Curve of the Animation
Animation Shorthand Property

Далее два примера, надеюсь, что они будут работать после конвертации в html.

Specify the Speed Curve of the Animation¶

In [4]:

%%html
<style> 
div.anim {
    width: 100px;
    height: 50px;
    background-color: red;
    font-weight: bold;
    position: relative;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
}

/* Chrome, Safari, Opera */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}

/* Standard syntax */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 300px;}
}

/* Standard syntax */
@keyframes mymove {
    from {left: 0px;}
    to {left: 300px;}
}
</style>


<p><strong>Note:</strong> The animation-timing-funtion property is not supported in Internet Explorer 9 and earlier versions.</p>

<div id="div1" class="anim">linear</div>
<div id="div2" class="anim">ease</div>
<div id="div3" class="anim">ease-in</div>
<div id="div4" class="anim">ease-out</div>
<div id="div5" class="anim">ease-in-out</div>

Note: The animation-timing-funtion property is not supported in Internet Explorer 9 and earlier versions.

linear

ease

ease-in

ease-out

ease-in-out

Animation Shorthand Property¶

In [5]:

%%html
<style> 
div.anim2 {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: example;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    /* Standard syntax */
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>


<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div class="anim2"></div>

Note: This example does not work in Internet Explorer 9 and earlier versions.

Итак, что нам мешает настрогать баннеров? Они еще могут двигаться, анимацию можно приостанавливать...

Property	Description
@keyframes	Specifies the animation code
animation	A shorthand property for setting all the animation properties
animation-delay	Specifies a delay for the start of an animation
animation-direction	Specifies whether an animation should play in reverse direction or alternate cycles
animation-duration	Specifies how many seconds or milliseconds an animation takes to complete one cycle
animation-fill-mode	Specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay)
animation-iteration-count	Specifies the number of times an animation should be played
animation-name	Specifies the name of the @keyframes animation
animation-play-state	Specifies whether the animation is running or paused
animation-timing-function	Specifies the speed curve of the animation

Посты чуть ниже также могут вас заинтересовать