Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 26.06.2017, 17:22   #1
Slink93
Новичок
Джуниор
 
Регистрация: 26.06.2017
Сообщений: 1
По умолчанию Как сделать адаптивную анимацию в 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 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


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