Блог

Главная - Вопросы по программированию - Отключить CSS анимации

Отключить CSS анимации

#css #css-animations

Вопрос:

Я анимировал с помощью функции 2 @keyframe и пытаюсь отключить одну из них при входе в мобильное представление. Как отключить анимацию: перемещение? Это мой код.

     /* Animate */
span {
    animation: 
    animate 5s linear infinite,
    moving 18s infinite;
    outline: none;
    line-height: 0.70em;
}

@keyframes animate {
    0%
    {
        color: #fff;
        text-shadow: none;
    }
    100%
    {
        color: #B37A4C;
        text-shadow: 0 0 10px #B37A4C;
    }
}

@keyframes moving {
    0%{margin-left: 100px;}
    10%{margin-left: 50px;}
    20%{margin-right: 100px;}
    30%{margin-right: 50px;}
    40%{margin-left: 100px;}
    50%{margin-left: 50px;}
    60%{margin-right: 100px;}
    70%{margin-right: 50px;}
    80%{margin-left: 100px;}
    90%{margin-left: 50px;}
    100%{margin-right: 100px;}
}
/* animate */












/* media queries  */

@media (max-width:1200px){

    html{
        font-size: 55%;
    }

    .home{
        padding:1rem 4rem;
    }

}

@media (max-width:991px){

header{
    left:-120%;
}

#menu{
    display: block;
}

header.toggle{
    left:0%;
}

body{
    padding:0;
}


}

@media (max-width:768px){

    html{
        font-size: 50%;
    }

}

@media (max-width:400px){

    header{
        width: 100vw;
    }

    .heading{
        margin:0 3rem;
    }

    .about .row .counter .box{
        width: 100%;
    }

    .education .box-container .box{
        width:100%;
    }

    .portfolio .box-container .box{
        width:100%;
    }

    .contact .row form{
        margin:3rem 0;
    }

    span .moving{
        display: none;
    }

}

Как отключить перемещение @keyframe в @media (максимальная ширина:400 пикселей)?
Похоже, что ваш пост в основном состоит из кода; пожалуйста, добавьте еще несколько деталей.
Похоже, что ваш пост в основном состоит из кода; пожалуйста, добавьте еще несколько деталей.
Похоже, что ваш пост в основном состоит из кода; пожалуйста, добавьте еще несколько деталей.
Похоже, что ваш пост в основном состоит из кода; пожалуйста, добавьте еще несколько деталей.
Похоже, что ваш пост в основном состоит из кода; пожалуйста, добавьте еще несколько деталей.
Похоже, что ваш пост в основном состоит из кода; пожалуйста, добавьте еще несколько деталей.

Комментарии:

1. вы можете добавить медиа-запрос, например @media (максимальная ширина:460 пикселей){ промежуток { анимация: анимация 5s линейная бесконечная, /// добавьте только тот, который вы хотите применить }} // анимированная анимация должна быть ниже этого медиа-запроса

2. Он все еще анимирует 2 анимации, потому что этот код не отключил исходный код.

Ответ №1:

После того как вы зададите 2 анимации для каждого промежутка, установите только первую в своем медиа-запросе:

 @media (max-width: 400px) {
    span {animation: 
    animate 5s linear infinite;
    outline: none;
    line-height: 0.70em;
  }
}

Таким образом, ваш CSS становится:

     /* Animate */
span {
    animation: 
    animate 5s linear infinite, moving 18s infinite;
    outline: none;
    line-height: 0.70em;
}

@media (max-width: 400px) {
    span {animation: animate 5s linear infinite;
    outline: none;
    line-height: 0.70em;
  }
}

@keyframes animate {
    0%
    {
        color: #fff;
        text-shadow: none;
    }
    100%
    {
        color: #B37A4C;
        text-shadow: 0 0 10px #B37A4C;
    }
}

@keyframes moving {
    0%{margin-left: 100px;}
    10%{margin-left: 50px;}
    20%{margin-right: 100px;}
    30%{margin-right: 50px;}
    40%{margin-left: 100px;}
    50%{margin-left: 50px;}
    60%{margin-right: 100px;}
    70%{margin-right: 50px;}
    80%{margin-left: 100px;}
    90%{margin-left: 50px;}
    100%{margin-right: 100px;}
}

Ответ №2:

Если вы добавите новое объявление анимации для этого элемента после других стилей, он будет применять только один набор, завернутый в медиа-запрос или нет.

     /* Animate */
span {
    animation: 
    animate 5s linear infinite,
    moving 18s infinite;
    outline: none;
    line-height: 0.70em;
    font-size:20px;
}

@keyframes animate {
    0%
    {
        color: #fff;
        text-shadow: none;
    }
    100%
    {
        color: #B37A4C;
        text-shadow: 0 0 10px #B37A4C;
    }
}

@keyframes moving {
    0%{margin-left: 100px;}
    10%{margin-left: 50px;}
    20%{margin-right: 100px;}
    30%{margin-right: 50px;}
    40%{margin-left: 100px;}
    50%{margin-left: 50px;}
    60%{margin-right: 100px;}
    70%{margin-right: 50px;}
    80%{margin-left: 100px;}
    90%{margin-left: 50px;}
    100%{margin-right: 100px;}
}
/* animate */


span {
    animation:moving 18s infinite;
    outline: none;
    line-height: 0.70em;
} 
 <span>span</span>
Метки: