Рыбка плывет определенное расстояние, по достижению которого должна развернуться и поплыть обратно. Какие правила анимации нужно сделать?
CSS
@keyframes go-right-left {
from {
right: 0px;
}
to {
right: calc(40% - 50px);
}
}
@-webkit-keyframes go-right-left {
from {
right: 0px;
}
to {
right: calc(40% - 50px);
}
}
.fish-blue {
animation: go-right-left 60s ease infinite alternate;
-webkit-animation: go-right-left 60s ease infinite alternate;
position: relative;
}
Ответ
С alternate много багов, поэтому лучше так:
.fish {
background: url('https://image.ibb.co/iRhXWL/an144.gif') no-repeat;
height: 61px;
width: 100px;
position: absolute;
top: 50px;
transition: left 2.4s;
animation: fish 5s ease infinite, fish-rotate 5s steps(1) infinite;
}
@keyframes fish {
0% {
left: 20px;
}
50% {
left: 300px;
}
100% {
left: 20px;
}
}
@keyframes fish-rotate {
0% {
transform: scale(-1, 1)
}
50% {
transform: scale(1, 1)
}
100% {
transform: scale(-1, 1)
}
}
Комментариев нет:
Отправить комментарий