Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 26.06.2017, 18:22   #1
Slink93
Новичок
 
Регистрация: 26.06.2017
Сообщений: 1
Репутация: 10
По умолчанию Как сделать адаптивную анимацию в css?

Добрый день, как сделать адаптивную анимацию? Стоит у меня одно изображение фоном, а на втором изображении поставил анимацию ( летает вверх/вниз). Чем больше экран тем больше изображение вылетает за границу фона, как сделать что бы изображение не выходило за границу фона при любом типе экарана?

background-image: url(http://www.importsnab.ru/sites/defau...ewm-mews.jpg);
background-repeat: no-repeat;
background-size: 336px 280px;
height: 336px;
width: 280px;

.imgAnima {
animation-name: move;
position: absolute;
animation: move 3s ;
animation-iteration-count: infinite;
width: 4em;
height: 3em;
margin-top: 12%;
transition: all 2s;
}

@keyframes move {
0% 100% {
margin-top: 12%;
}

10% 90% {
margin-top: 10%;

}
15% 85% {
margin-top: 8%;
}
25% 75% {
margin-top: 6%;

}
35% 65% {
margin-top: 4%;
}
50% {
margin-top: 3%;


}
}
Slink93 вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать анимацию в PHP Vlad123DD HTML и CSS 1 11.11.2016 22:22
Как сделать gif анимацию sanek_da HTML и CSS 3 24.04.2013 14:23
объясните как сделать анимацию povsklada HTML и CSS 4 01.03.2012 13:08
Как сделать в делфи анимацию: шарик движется по заданной окружности? tatee Общие вопросы Delphi 3 28.12.2009 00:17
Как сделать анимацию картинки 2210 Мультимедиа в Delphi 4 01.04.2009 02:23


18:08.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru