CSS3 Пример анимации с 20 мейнфреймами

Не могу сказать, что это лучший вариант, и здесь только код без комментариев... Но в целом ясно, как можно использовать notebook для добавления стилей

CSS3 Gradients w3schools
background-size

In [1]:

%%html
<style> 
div.sein1 {
    width: 100%;
    height: 260px;
    border: 1px solid black;
    background-size: 100% ;
    background-repeat: no-repeat;    
    background-image: url('http://cl72410.tmweb.ru/jm_34_trado/images//banners/criterias_w1_t.PNG');
    background-position: top left;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 50s 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;}
    div.se_hack::before {
    content: " - Remember this";
    1% {background-size: 80%;}
    5% {background-size: 150%;}
    8% {background-position: 100% 0%;}
    20% {background-position: 100% 0%;}
    24% {background-position: 100% 100%;}
    40% {background-position: 100% 100%;}
    45% {background-position: center;}
    46% {background-size: 100%;}
    50% {background-size: 150%;}
    55% {background-position: 0% 100%;}
    75% {background-position: 0% 100%;}
    80% {background-size: 100%;}
    82% {background-size: 150%;}
    85% {background-position: 0% 0%;}
    100% {background-position: 0% 0%;}
   /* 10% {background-size: 120%;}
    17% {background-position: 0% 0%;}
    19% {background-position: -50% 0%;}
    29% {background-position: 20% -70%;}
    90% {background-position: 20% 100%;}
    100% {background-position: 50% 0%;} */
    
}
</style>


<div class="sein1"></div>

In [ ]:

In [2]:

%%html

      <div class="sein1"><div class="sein2"><div class="sein3">


    <div class="se_hack"><h4 class="call_me_back_headline">Позвоните 3223322333322</h4>
    <p class="call_me_back_pretext">Или оставьте свой телефон</p>
    
<div style="text-align: right; padding-right: 4px; font-size: 10px;display: none;"></div></div></div></div>

Позвоните 3223322333322

Или оставьте свой телефон

In [2]:

%%html
<style> 
div.se_hack::before {
    content: " - Remember this";
    background-color: yellow;
    color: red;
    font-weight: bold;
} 
      
</style> 

In [3]:

%%html
<style> 
div.se_hack::before {
    content:  " -Не надо всякую фигню запоминать";
    background-color: blue;
    color: red;
    font-weight: bold;
    -webkit-animation: mymove7 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove7 50s infinite;              
} 
        /* Standard syntax */
    @keyframes mymove7 {
    20% {content: " -Надоо";}
        } 
      
</style> 

Анимация выше не работает, она и не должна..., нет в списке animatable, но попробовал...

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