Auto Hide Animation через x секунд [закрыто] ⇐ CSS

[Anonymous]

У меня есть проект React, в котором я импортирую стороннюю LIB, в которой есть несколько повторно используемых компонентов, таких как ввод и т. Д. Я хочу обновить стили компонента и анимацию на границу. Я смог заставить это работать. Вот код < /p>

Код: Выделить всё

import "./styles.scss";

export default function App() {
return (



);
}< /code>
.animation-on {
@property --bg-angle {
inherits: false;
initial-value: 40deg;
syntax: "";
}

@keyframes border-animation {
@for $i from 0 through 72 {
#{percentage($i / 72)} {
--bg-angle: #{($i * 5)}deg;
}
}
}

input:not([type="checkbox"]),
textarea {
padding: 8px;
position: relative;
border: 3px solid transparent !important;
border-image: conic-gradient(
from var(--bg-angle, 180deg),
#00d0e0,
#c5ef71,
#00a63b,
#009eac,
#00d0e0,
#236cff,
#00d0e0
)
1 !important;
border-width: 2px !important;
border-radius: 20px;
opacity: 1;
animation: border-animation var(--spinDuration, 1500ms) infinite linear;
}
}< /code>
< /div>
< /div>
< /p>
А и вот демо < /p>
demo < /p>
Теперь мое требование, я хочу скрыть эту анимацию через 10 секунд. В основном остановите анимацию через 10 секунд и удалите анимацию пограничного изображения. [b] есть ли способ сделать это, просто используя CSS? Я попытался создать границу: нет 

после 100% ключа, но ничего не сработало. Пожалуйста, помогите. [/b]


Подробнее здесь: https://stackoverflow.com/questions/795 ... -x-seconds