CSS Анимация движения картинки

518

20 марта 2017, 07:08

Здравствуйте. Подскажите, как заставить картинку по достижению определенной точки двигаться обратно? Что я имею:

.blok1 {
    height: 100%;
    background-image: url('/resources/admin/back.jpg');
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);
    position:fixed;
    width:100%;
    top:0;
    left:0;
    z-index:-1;
    -webkit-animation: backgroundScroll 30s linear infinite;
    animation: backgroundScroll 30s linear infinite;
    background-size:130% 100%;
    background-position:top;
    background-attachment:fixed;
}

body{margin:0px; padding:0px;}
@-webkit-keyframes backgroundScroll {
    from {background-position: 0 0;}
    to {background-position: -400px 0;}
}
@keyframes backgroundScroll {
    from {background-position: 0 0;}
    to {background-position: -400px 0;}
}

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

Answer 1

Так вроде

.fill{ 
	background:#cc0; 
	width:300px; 
	height:300px; 
	position:relative; 
	margin:100px; 
} 
.stock{ 
	width:100px; 
	height:100px; 
	border-radius:100px; 
	position:absolute; 
	top:0; left:0; 
	animation:pos 5s infinite ease-in-out; 
	transform:rotate(360deg); 
	background:linear-gradient(red,blue); 
	transition:scale 5s linear; 
	z-index:-10; 
} 
 
@keyframes pos{ 
	0%{ 
		top:100px; 
		left:320px; 
	} 
	50%{ 
		top:100px; 
		left:320px; 
		transform:scale(.5); 
		z-index:-10; 
	} 
	70%{ 
		left:-100px; 
		top:100px; 
		z-index:-10; 
	} 
	80%{ 
		z-index:10; 
		left:-120px; 
		top:100px; 
	} 
	100%{ 
		left:320px; 
		top:100px; 
		z-index:10; 
		transform:scale(1.3); 
	} 
}

<div class="fill">  
   <div class="stock"></div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

CSS Анимация движения картинки

условие в html-странице на Go

Обработчик в WPF

Ray из 2D коллайдера

Сохранить битмап в Xamarin Android