За последние 24 часа нас посетили 17344 программиста и 1197 роботов. Сейчас ищут 1275 программистов ...

Плавная смена цвета на css

Тема в разделе "HTML и CSS", создана пользователем DJTIMOHA, 5 апр 2018.

  1. DJTIMOHA

    DJTIMOHA Активный пользователь

    С нами с:
    5 апр 2015
    Сообщения:
    109
    Симпатии:
    2
    Друзья подскажите как написать код в стиле
    У меня есть блок
    Код (Text):
    1. <div class="vs">TEXT</div>
    В котором стиль
    Код (Text):
    1. width: 200px;
    2. padding: 15px;
    3. position: fixed;
    4. top: 150px;
    5. left: 10%;
    Как сделать чтобы он после открытия страницы плавно сменил фон на красный цвет в течении 3 секунд?
     
  2. Dron-Boy

    Dron-Boy Старожил

    С нами с:
    20 ноя 2014
    Сообщения:
    1.041
    Симпатии:
    126
    css анимация
     
  3. DJTIMOHA

    DJTIMOHA Активный пользователь

    С нами с:
    5 апр 2015
    Сообщения:
    109
    Симпатии:
    2
    Я понимаю, мне бы пример.
    Ну всё что я находил на просторах инета все анимации зациклены, а мне нужно только одно действе чтоб только покраснел и оставался красный до обновление или перехода на другую страницу
     
  4. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    transition: background-color 3s ease;
     
  5. DJTIMOHA

    DJTIMOHA Активный пользователь

    С нами с:
    5 апр 2015
    Сообщения:
    109
    Симпатии:
    2
    просто добавить в класс vs и всё?
     
  6. DJTIMOHA

    DJTIMOHA Активный пользователь

    С нами с:
    5 апр 2015
    Сообщения:
    109
    Симпатии:
    2
    Попробывал, нет плавной замены, сразу красный
     
  7. nospiou

    nospiou Старожил

    С нами с:
    4 фев 2018
    Сообщения:
    3.400
    Симпатии:
    510
    https://www.w3schools.com/css/css3_animations.asp + sidebar
    --- Добавлено ---
    Ну потому что ты скорее всего меняешь с красного на красный вот и не видно.
    Код (CSS):
    1. div {
    2.     width: 100px;
    3.     height: 100px;
    4.     background-color: yellow;
    5.     animation-name: example;
    6.     animation-duration: 4s;
    7. }
    8.  
    9. @keyframes example {
    10.     from {background-color: red;}
    11.     to {background-color: yellow;}
    12. }
     
  8. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.984
    Симпатии:
    759