С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Loggos
0 / 0 / 0
Регистрация: 05.12.2015
Сообщений: 87
1

CSS анимация

06.03.2017, 12:40. Просмотров 172. Ответов 11
Метки нет (Все метки)

Всем привет, есть следующая анимация:

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="image-placeholder">
<div class="image img1">
  <img src="http://www.pngall.com/wp-content/uploads/2016/03/Skeleton-Head-PNG-HD.png" alt="">
</div>
 
<div class="image img2">
  <img src="https://images.vexels.com/media/users/3/137744/isolated/preview/e7b42ac3ce2388235bc33fceea854ec2-palm-palm-tree-by-vexels.png" alt="">
</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
body {
  background: brown;
}
 
.image-placeholder {
  position: relative;
}
 
.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 400px;
  margin: 40px;
  opacity: 0;
}
 
.image img {
  max-width: 100%;
}
 
.img1 {
  animation: 6s show-in-out infinite;
  animation-timing-function: ease-in-out;
}
 
.img2 {
  animation: 6s show-in-out infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 3s;
}
 
@keyframes show-in-out {
  0% {opacity: 0;}
  10% {opacity: 1;}
  35% {opacity: 1; transform: translateX(0%)}
  50% {opacity: 0; transform: translateX(-150%);}
  100% {opacity: 0; transform: translateX(-150%);}
}
https://jsfiddle.net/4taon7eL/
Подскажите, пожалуйста, как сделать, чтобы таким же образом менялись четыре картинки вместо двух.
Спасибо за внимание.
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
06.03.2017, 12:40
Ответы с готовыми решениями:

Css анимация
Делаю прелоадер на страницу. Сделала вот такой, но попросили задействовать...

Анимация CSS
Подскажите анимацию CSS.На картинке есть кнопка подскажите анимацию что бы при...

Анимация css
Ребятки, проблема с анимацией CSS. Я в этой теме плаваю, поэтому много вопросов...

Анимация css
Здрраовствуйте, уважаемые форумчане. Недавно углубившиюсь в азы анимации на...

CSS анимация
&lt;div id=&quot;middlemenu&quot;&gt; &lt;ul id=&quot;iconmenu&quot;&gt; &lt;li&gt; ...

11
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2837 / 2405 / 1038
Регистрация: 15.12.2012
Сообщений: 8,935
Записей в блоге: 5
06.03.2017, 13:16 2
Loggos, и в чём проблема? Картинки 3 и 4 сами добавите...
HTML5
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body {
      background: brown;
    }
     
    .image-placeholder {
      position: relative;
    }
     
    .image {
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height: 400px;
      margin: 40px;
      opacity: 0;
    }
     
    .image img {
      max-width: 100%;
    }
     
    .img1 {
      animation: 6s show-in-out infinite;
      animation-timing-function: ease-in-out;
    }
     
    .img2 {
      animation: 6s show-in-out infinite;
      animation-timing-function: ease-in-out;
      animation-delay: 3s;
    }
    
    .img3 {
      animation: 6s show-in-out infinite;
      animation-timing-function: ease-in-out;
      animation-delay: 6s;
    }
    .img4 {
      animation: 6s show-in-out infinite;
      animation-timing-function: ease-in-out;
      animation-delay: 9s;
    }
     
    @keyframes show-in-out {
      0% {opacity: 0;}
      10% {opacity: 1;}
      35% {opacity: 1; transform: translateX(0%)}
      50% {opacity: 0; transform: translateX(-150%);}
      100% {opacity: 0; transform: translateX(-150%);}
    }
    </style>
</head>
<body>
    <div class="image-placeholder">
        <div class="image img1">
          <img src="http://www.pngall.com/wp-content/uploads/2016/03/Skeleton-Head-PNG-HD.png" alt="">
        </div>
         
        <div class="image img2">
          <img src="https://images.vexels.com/media/users/3/137744/isolated/preview/e7b42ac3ce2388235bc33fceea854ec2-palm-palm-tree-by-vexels.png" alt="">
        </div>
        
        <div class="image img3">
          <img src="http://www.pngall.com/wp-content/uploads/2016/03/Skeleton-Head-PNG-HD.png" alt="">
        </div>
        
        <div class="image img4">
          <img src="https://images.vexels.com/media/users/3/137744/isolated/preview/e7b42ac3ce2388235bc33fceea854ec2-palm-palm-tree-by-vexels.png" alt="">
        </div>
    </div>
</body>
</html>
1
Loggos
0 / 0 / 0
Регистрация: 05.12.2015
Сообщений: 87
06.03.2017, 13:25  [ТС] 3
С Вашим кодом, последняя картинка будет налазить на первую. Длительность анимации 6секунд, а задержка последней 9секунд, когда по второму кругу прогоняется анимация и если поставить другие изображения, то последняя картинка будет появляться с другими.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="image-placeholder">
<div class="image img1">
  <img src="http://www.pngall.com/wp-content/uploads/2016/03/Skeleton-Head-PNG-HD.png" alt="">
</div>
 
<div class="image img2">
  <img src="https://images.vexels.com/media/users/3/137744/isolated/preview/e7b42ac3ce2388235bc33fceea854ec2-palm-palm-tree-by-vexels.png" alt="">
</div>
 
<div class="image img3">
     <img src="http://www.pngall.com/wp-content/uploads/2016/03/Skeleton-Head-PNG-HD.png" alt="">
</div>
        
<div class="image img4">
   <img src="http://www.pngall.com/wp-content/uploads/2016/03/Skeleton-Head-PNG-HD.png" alt="">
</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
50
51
body {
  background: brown;
}
 
.image-placeholder {
  position: relative;
}
 
.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 400px;
  margin: 40px;
  opacity: 0;
}
 
.image img {
  max-width: 100%;
}
 
.img1 {
  animation: 6s show-in-out infinite;
  animation-timing-function: ease-in-out;
}
 
.img2 {
  animation: 6s show-in-out infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 3s;
}
 
.img3 {
      animation: 6s show-in-out infinite;
      animation-timing-function: ease-in-out;
      animation-delay: 6s;
}
.img4 {
      animation: 6s show-in-out infinite;
      animation-timing-function: ease-in-out;
      animation-delay: 9s;
}
 
@keyframes show-in-out {
  0% {opacity: 0;}
  10% {opacity: 1;}
  35% {opacity: 1; transform: translateX(0%)}
  50% {opacity: 0; transform: translateX(-150%);}
  100% {opacity: 0; transform: translateX(-150%);}
}
https://jsfiddle.net/4taon7eL/
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2837 / 2405 / 1038
Регистрация: 15.12.2012
Сообщений: 8,935
Записей в блоге: 5
06.03.2017, 13:30 4
Loggos, а Вы мой код брали вообще? Нет лучше поставлю вопрос так картинки будут разные или циклично появляться?
0
Loggos
0 / 0 / 0
Регистрация: 05.12.2015
Сообщений: 87
06.03.2017, 13:35  [ТС] 5
Ну Вы же в добавили два блока img3, img4 и в стилях задали им анимацию. Что я не понял?)
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2837 / 2405 / 1038
Регистрация: 15.12.2012
Сообщений: 8,935
Записей в блоге: 5
06.03.2017, 13:42 6
Цитата Сообщение от Loggos Посмотреть сообщение
Ну Вы же в добавили два блока img3, img4 и в стилях задали им анимацию. Что я не понял?)
Для тех кто в танке повторяю вопрос картинки циклично повторяются или они все разные будут?

Если картинки разные, то на CSS Вы не провернёте данный эффект с пмощью animation, поскольку при показе картинок надо пересчитывать счётчик анимации... Можно попробовать transition... Если картинки выводятся циклично, то можно испольлзовать код из поста 2
1
Loggos
0 / 0 / 0
Регистрация: 05.12.2015
Сообщений: 87
06.03.2017, 13:45  [ТС] 7
Четыре разные картинки циклично повторяются бесконечное количество раз, как на том примере что я скинул, только четыре разные картинки.
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2837 / 2405 / 1038
Регистрация: 15.12.2012
Сообщений: 8,935
Записей в блоге: 5
06.03.2017, 13:48 8
Loggos, ответил выше... В вопросе уточняйте, что они разные...
0
Loggos
0 / 0 / 0
Регистрация: 05.12.2015
Сообщений: 87
06.03.2017, 13:59  [ТС] 9
Спасибо
0
aj17
284 / 273 / 155
Регистрация: 02.06.2014
Сообщений: 1,020
06.03.2017, 14:01 10
Покопайте в эту сторону)
1
Вложения
Тип файла: rar Slider.rar (315.3 Кб, 6 просмотров)
Loggos
0 / 0 / 0
Регистрация: 05.12.2015
Сообщений: 87
06.03.2017, 14:04  [ТС] 11
Спасибо, но я с этого и начинал копать) Пришёл к выводу что легче будет с анимацией)
0
aj17
284 / 273 / 155
Регистрация: 02.06.2014
Сообщений: 1,020
06.03.2017, 14:07 12
Цитата Сообщение от Loggos Посмотреть сообщение
Спасибо, но я с этого и начинал копать) Пришёл к выводу что легче будет с анимацией)
А в моем примере же, и есть анимация?) Разве не то?)
0
06.03.2017, 14:07
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
06.03.2017, 14:07

CSS анимация
Всем привет! Изучаю web программирование. Буду краток: как мне сделать так,...

Css 3 анимация
Нигде не нашел ответ прошу помощи. Как реализовать задержку старта анимации....

CSS анимация прелодера
Есть готовый прелоадер. В хроме, опере анимация хорошо отображается. В мозили...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru