Лого SiteHere.ru

Анимация с помощью CSS преобразований. Часть 3 — продвинутая анимация

Анимация с помощью CSS преобразований. Часть 3 — продвинутая анимация

Это заключительный урок из серии «Анимация с помощью CSS преобразований». Я надеюсь что вы изучили предыдущие уроки и вы хорошо понимаете что CSS преобразования могут значительно облегчить создание определенных эффектов на сайте. При этом всё достаточно просто, ведь для анимации нужно лишь несколько строчек в файле стилей. В этой статье мы посмотрим функции синхронизации и каким образом можно влиять на один элемент через другой.

Предыдущие уроки из серии «Анимация с помощью CSS преобразований» вы найдете по следующим ссылкам:

Примеры будут корректно работать в браузерах Firefox, Chrome, Safari и Internet Explorer 10.

Также напоминаю, что анимации работают только при наведении!!!

Сегодня мы пойдем дальше и рассмотрим функции синхронизации, а также как можно «влиять» на один элемент посредством наведения на другой элемент.

Функции синхронизации

В этом примере мы рассмотрим 4 различных перехода с 4-мя различными функциями синхронизации.

Суть данной анимации заключается в том, что при наведении синий блок переворачивается, изменяет цвет и смещается в правый нижний угол:

Фон
Блок
(наведите на блок, чтобы увидеть анимацию)

Для тех, кто еще не перешел на новый браузер небольшое видео:

В расположении блоков в HTML нет ничего необычного:

1
2
3
<div id="stage">Фон
    <div id="block">Блок</div>
</div>

А вот на CSS необходимо немного остановиться и внимательно посмотреть:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#stage {
    background: none repeat scroll 0 0 #efefef;
    height: 300px;
    margin: 0 auto;
    position: relative;
    width: 400px;
}
 
/*Начальное значение блока*/
#block {
    background: none repeat scroll 0 0 #00f;
    color: #fff;
    height: 100px;
    left: 0;
    position: absolute;
    top: 0;
 
    /*Обратите внимание на свойство ниже*/
    transition: left 2s ease-out 0s, top 2s ease-in 0s, background 1s linear 0s, transform 1s ease-in-out 1s;
    width: 100px;
}
 
/*Конечные значения блока после анимации*/
#stage:hover #block {
    background: none repeat scroll 0 0 red;
    left: 300px;
    top: 200px;
    transform: rotate(360deg);
}

Здесь я хочу обратить внимание на свойство, которое я прокомментировал в CSS:

Свойство transition

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

Также это свойство является сокращенной формой следующий свойств:

1
2
3
4
transition-property: left, top, background, transform;
transition-duration: 2s, 2s, 1s, 1s;
transition-delay: 0s, 0s, 0s, 1s;
transition-timing-function: ease, ease-out, ease-in, linear, ease-in-out;

Что же мы сделали? А вот что: мы все части из каждого параметра (у нас их четыре на изображении выше) записали по порядку в свойства transition-property, transition-duration, transition-delay и transition-timing-function.

А сейчас посмотрим что же это за свойства такие в которые мы переписали все эти параметры:

  • transition-property — здесь указывается свойство, которое будет изменяться в процессе трансформации. В нашем случае мы изменяем положение блока с помощью свойств left и top, с помощью background мы изменяем цвет блока и, наконец, с помощью transform мы переворачиваем блок (но указываем это немного позже, а здесь лишь показываем что трансформация блока будет).
  • transition-duration — здесь задаем длительность анимации.
  • transition-delay — указываем время, через которое происходит трансформация. Например, блок в нашем примере поворачивается только через 1 секунду после того, как блок начал двигаться.
  • transition-timing-function — здесь нужно задавать функции анимации. Об этих параметрах можно написать очень много, но я скажу лишь что, при каждом из наших параметров (ease, ease-out, ease-in, linear и ease-in-out) анимация происходит с разной скоростью.



Как влиять на элемент через элемент

Надеюсь вы разобрались в том, каким образом мы делали анимацию и совмещать при этом несколько свойств. Поэтому двигаемся дальше.

Немного сложным кажется название этой части статьи, вам не кажется? 🙂 . Но суть состоит в том, чтобы при наведении на один элемент мы могли каким-либо образом «влиять» другой элемент.

При наведении на первый блок — первый блок увеличивается, а второй катится вправо превращаясь в круг. При наведении на второй блок — он увеличивается по ширине.

Убедитесь в этом самостоятельно ниже:

Блок 1
Блок 2
(наведите поочередно на первый, а потом на второй блок)

Чтобы не обидеть тех, у кого браузеры не поддерживают технологию CSS преобразований:

В HTML два блока находятся на одном уровне:

1
2
3
4
<div id="stage3">
    <div id="box3">Блок 1</div>
    <div id="box4">Блок 2</div>
</div>

В CSS есть интересный знак, который позволяет сделать то, что мы задумали:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/* фон */ 
#stage3 {
    background: none repeat scroll 0 0 #efefef;
    height: 100px;
    position: relative;
    text-align: right;
}
 
/* Блок 1 - начальные свойства */ 
#box3 {
    background: none repeat scroll 0 0 red;
    border: 1px solid #666;
    color: #fff;
    height: 100px;
    position: absolute;
    transition: all 1s ease-in-out 0s;
    width: 100px;
}
 
/* Блок 1 - конечные свойства для анимации при наведении */ 
#box3:hover {
    width: 600px;
}
 
/* Блок 2 - начальные свойства */ 
#box4 {
    background: none repeat scroll 0 0 #00f;
    border: 1px solid #666;
    color: #fff;
    height: 100px;
    left: 120px;
    position: absolute;
    transition: all 1s ease-in-out 0s;
    width: 100px;
}
 
/* Блок 2 - конечные свойства для анимации при наведении */ 
#box4:hover {
    width: 500px;
}
 
/* Внимание! Здесь при наведении на первый блок изменяется он, а также второй блок трансформируется в круг*/
#box3:hover + #box4 {
    background: none repeat scroll 0 0 #ff0;
    border-radius: 50px;
    color: #000;
    left: 627px;
    transform: rotate(360deg);
}

Обратите внимание на знак «+«, с помощью которого мы можем «связать» два элемента на странице.



Вывод

Этим уроком я хочу закончить серию статей «Анимация с помощью CSS преобразований». Обязательно пройдите предыдущие уроки (ссылки есть в начале статьи). Сейчас вы уже знакомы с тем, каким образом можно сделать анимацию используя преобразования на CSS. Что вы будете уметь в дальнейшем зависит только от того, сколько времени вы посвятите практике при изучении CSS преобразований. Ведь с помощью преобразований можно делать действительно красивые и оригинальные эффекты на сайте.

В дальнейшем я буду писать о анимации на CSS. Но та анимация будет значительно сложнее, чем та, которую мы рассматривали в этих уроках!

При возникновении проблем — пишите их в комментариях. Потому что я понимаю — здесь не всё так легко разобраться человеку, который не является профессионалом в этой области.


Успехов!

С Уважением, Юрий Немец

5 комментариев к записи
  • ZeroXor

    Эффекты шикарны, не спорю. Но я упрямо не могу придумать для них практического применения. Сейчас, когда балом правит минимализм и адаптивная верстка, на сайтах просто нет места для таких эффектов.

     
  • WebNoob

    Мне понравились уроки,но я хотел бы спросить.Как сделать так, чтобы анимация проигрывалась и в конце все характеристики оставались. т.е. Вот представим квадрат, которые при нажатии вертится по оси Х и потом меняет свой размер, но при окончании анимации размер оставался??

     
  • Akex

    Добрый день,

    А как сдклать в точности наоборот от этого:

     

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .container {
      position: relative;
      width: 100%;
      float:center;
    }
    #containerL {
      position: relative;
      width: 50%;
      float:left;
    }
    #containerR {
      position: relative;
      width: 50%;
      float:right;
    }
    
    .imageL {
      display: block;
      width: 100%;
      height: auto;
    }
    .imageR {
      display: block;
      width: 100%;
      height: auto;
    }
    
    #overlayL {
      position: absolute;
      bottom: 0;
      left: 100%;
      right: 0;
      background-color: #008CBA;
      overflow: hidden;
      width: 0;
      height: 100%;
      transition: .5s ease;
    }
    #overlayR {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #008CBA;
      overflow: hidden;
      width: 0;
      height: 100%;
      transition: .5s ease;
    }
    #containerL:hover  #overlayL {
      width: 100%;
      left: 0;
    }
    #containerR:hover  #overlayR {
      width: 100%;
    }
    
    .textL {
      white-space: nowrap; 
      color: white;
      font-size: 20px;
      position: absolute;
      overflow: hidden;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }
    .textR {
      white-space: nowrap; 
      color: white;
      font-size: 20px;
      position: absolute;
      overflow: hidden;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }
    
    </style>
    </head>
    <body>
    
    
    
    <div class="container">
    
    	<div id="containerL">
     	 <img src="img_avatar.png" alt="AvatarL" class="imageL">
    	  <div id="overlayL">
     		 <div class="textL">Hello WorldL</div>
      	  </div>
    	</div>
        
    	<div id="containerR">
    	  <img src="img_avatar.png" alt="Avatar" class="imageR">
      		<div id="overlayR">
        		<div class="textR">Hello WorldR</div>
      		</div>
    	</div>
    
    </div>
    
    
    </body>
    </html>
    

     

    Чтобы при наведении на левое перекрывалось правое поле и наоборот?

     
    • Юрий Немец

      Здравствуйте. Чтобы сделать наоборот: делаем z-index у одного меньше, чем у второго, и анимацию делаем по аналогии с примером.

       
      • Akex

        Спасибо огромное,

        Единственная проблема которая возникла — это подрагивание изображения при движении. Я пробовал использовать translate3d(0,0,0), но результат был только хуже. Может есть другой способ?

        Я решил использовать transform, чтобы результат был более гладким. Но теперь при hover правого элемента (блок 4) левый не изменяется

        <p data-height="265" data-theme-id="0" data-slug-hash="HkwBo" data-default-tab="html,result" data-user="dudleystorey" data-embed-version="2" data-pen-title="HTML5 Before & After Comparison Slider" class="codepen">See the Pen <a href="https://codepen.io/dudleystorey/pen/HkwBo/">HTML5 Before & After Comparison Slider</a> by Dudley Storey (<a href="http://codepen.io/dudleystorey">@dudleystorey</a>) on <a href="http://codepen.io">CodePen</a>.</p>
        <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
        
        /* text */ 
        .textL {
          position: absolute;
        }
          
        .textR {
          text-align: right;
          }
        
        /* фон */ 
        #maincontainer {  
            width: 100%;
            position: relative;  
           height: 400px;
        }
         
        /* Блок 1 - начальные свойства */ 
          .box3_class {background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-before.jpg") no-repeat 50% top fixed ;
        background-size: cover;  }
          
          .box4_class {
            background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg")  no-repeat 50% top fixed ;
          background-size: cover; }
          
        #box3 { 
            height: 100%;
            width: 50%;
            float:left;
           -webkit-transform-origin: 0% 50%; /* Chrome, Safari, Opera */
            transform-origin: 0% 50%;
              transition: 1.5s ease; 
          z-index: -1;
        }
         
        /* Блок 1 - конечные свойства для анимации при наведении */ 
        
         
        /* Блок 2 - начальные свойства */ 
        #box4 {
            border-left: 1px solid #666;
            height: 100%;
              width: 50%;
            float:right;
            right: 0;
            position: absolute;
            transition: 1.5s ease; 
            -webkit-transform-origin: 100% 50%; /* Chrome, Safari, Opera */
            transform-origin: 100% 50%;
        }
         
        /* Блок 4 - конечные свойства для анимации при наведении */ 
          
        #box4:hover{transform: scale(1.5,1);}
        #box4:hover~#box3{transform: scale(0.5,1);}
         
        
         /* Блок 3 - конечные свойства для анимации при наведении*/
        #box3:hover  {transform: scale(1.5,1)}
          
        #box3:hover + #box4 {transform: scale(0.5,1);}
         
        
        @media screen and (max-width: 1280px) {
         #box3  {background-size: auto 572px;} 
         #box4  {background-size: auto 572px;}
        }  
          
          
        @media screen and (max-width: 640px) {
         #maincontainer
          {display: none !important;}  
        }
        
        
        <div id="maincontainer">
        
            <div id="box3" class="box3_class">
            <div class="textL">
              <h2>Блок 3</h2> </div> 
              
            </div>
          
            <div id="box4" class="box4_class">
            <div class="textR">
              <h2>
           Блок 4
              </h2>
            </div>
        
        </div>
        </div>
        
        
         

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *