CSS3 эксперименты с анимацией баннеров

Сделал две прозрачные картинки ("схему" и "тетку с быком"), вставил их в баннер, заставил двигаться по расписанию. В итоге наложил их друг на друга. Надо экспериментировать дальше. Здесь по сути попробовал только background-position, background-size, transform: skewX(60deg)

The background-size property is animatable in CSS Gradually change the background-size from "10px 10px" to "125px 125px", and back to "10px 10px"

Gradually change the background property Only background-color, background-position, and background-size are animatable in CSS.
The opacity property is animatable in CSS
The perspective property is animatable in CSS
The bottom property is animatable in CSS.Gradually change the bottom property from 0px from the bottom to 300px then back: myDIV

Начнем с позиции и маштаба, в документации можно найти, как точно позициировать (а здесь "первый блин")¶

In [8]:

%%html
<style> 
#myDIV {
    max-width: 800px;
    height: 200px;
    border: 1px solid black;
    background-size: 100% ;
    background-repeat: no-repeat;    
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnLRi2fuClHsvLrbxRSg0qBDlPhurMXSt_-2qHwzCs8-b0XvkjJppceWXWF69ZSSnCeK40C3a71BZXLV1zHAKDYvY3mcTsjP5eaxzA2zlPteAGpBDTIlOBvt2g3O8ilXdjvDi27W9Gjzo/s960/criterias_w1_t.PNG');
    background-position: top left;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 15s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    
    0% {background-position: center;}
    26% {background-size: 40px 225px;}
    //85% {background-position: right bottom, left top;}
    
    //60% {background-position: left bottom;}
    //90% {background-position: bottom right;}
    //100% {background-position: bottom left;}
    
}   

/* Standard syntax */
@keyframes mymove {
    0% {background-position: center;}
    26% {background-size: 20%;}
    /*/85% {background-position: right bottom, left top;}
    
    //60% {background-position: left bottom;}
    //90% {background-position: bottom right;}
    //100% {background-position: bottom left;} */
    
}
</style>

<p>Gradually change the background-position from "top left" to "center", and back to "top left":<p>
<div id="myDIV"></div>

<p>The background-position property is <em>animatable</em> in CSS.</p>
<p><b>Note:</b> CSS Animations do not work in Internet Explorer 9 and earlier versions.</p>

Gradually change the background-position from "top left" to "center", and back to "top left":

The background-position property is animatable in CSS.

Note: CSS Animations do not work in Internet Explorer 9 and earlier versions.

А здесь добавлено скручивание, оно же сдвиг... Возможны трехмерные варианты...¶

In [9]:

%%html
<style> 
#myDIV2 {
    max-width: 800px;
    height: 200px;
    /*border: 1px solid black;*/
    background-size: 100% ;
    background-repeat: no-repeat;    
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnLRi2fuClHsvLrbxRSg0qBDlPhurMXSt_-2qHwzCs8-b0XvkjJppceWXWF69ZSSnCeK40C3a71BZXLV1zHAKDYvY3mcTsjP5eaxzA2zlPteAGpBDTIlOBvt2g3O8ilXdjvDi27W9Gjzo/s1280/criterias_w1_t.PNG');
    background-position: top left;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove2 25s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove2 {
    
    0% {background-position: center;}
    26% {background-size: 40px 225px;}
    //85% {background-position: right bottom, left top;}
    
    //60% {background-position: left bottom;}
    //90% {background-position: bottom right;}
    //100% {background-position: bottom left;}
    
}   

/* Standard syntax */
@keyframes mymove2 {
    0% {background-position: center;}
    26% {background-size:20%;}
    
    50%  { transform: skewX(60deg);}    
}
</style>

<p>Gradually change the background-position from "top left" to "center", and back to "top left":<p>
<div id="myDIV2"></div>

<p>The background-position property is <em>animatable</em> in CSS.</p>
<p><b>Note:</b> CSS Animations do not work in Internet Explorer 9 and earlier versions.</p>

Gradually change the background-position from "top left" to "center", and back to "top left":

The background-position property is animatable in CSS.

Note: CSS Animations do not work in Internet Explorer 9 and earlier versions.

In [ ]:

{
    -ms-transform: skewX(20deg); /* IE 9 */
    -webkit-transform: skewX(20deg); /* Safari */
    transform: skewX(20deg); /* Standard syntax */
}

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