Форум

LLIypuk · #1 (**permalink**) 11.04.2017, 09:53

Всем привет:
Сделал плавное увеличение / уменьшение картинки на сss.

.slider{
-webkit-transition:all 4000ms linear;
-moz-transition:all 4000ms linear;
-o-transition:all 4000ms linear;
-ms-transition:all 4000ms linear;
transition:all 4000ms linear;
}
.slider:hover{
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}

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

рони · #2 (**permalink**) 11.04.2017, 10:31

LLIypuk,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style type="text/css">
  div{
    width:500px;
    height:300px;
    overflow: hidden;
    position: relative;
    background-image: url(http://s1.fotokto.ru/photo/full/401/4019083.jpg);

  }
  div:hover{
    position: absolute;
    top:0;
   -webkit-animation: up 5s ease-in-out infinite;
	-moz-animation: up 5s ease-in-out infinite;
	-o-animation: up 5s ease-in-out infinite;
	animation: up 5s ease-in-out infinite;

  }
  @keyframes up {
	50% {
 -moz-transform: scale(1.1);
 -webkit-transform: scale(1.1);
 -o-transform: scale(1.1);
 transform: scale(1.1);
	}
}
@-webkit-keyframes up {
	50% {
 -moz-transform: scale(1.1);
 -webkit-transform: scale(1.1);
 -o-transform: scale(1.1);
 transform: scale(1.1);
	}
}


  </style>
</head>

<body>
<div></div>

</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript