Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Готовые стили в @keyframes (https://javascript.ru/forum/xhtml-html-css/82527-gotovye-stili-v-%40keyframes.html)

Paguo-86PK 20.05.2021 05:41

Готовые стили в @keyframes
 
Нe знаю, как корректно сформулировать вопрос.

Можно ли вместо:
<style>
@keyframes my {
	from {
		margin-left:100%;
	}
	to {
		margin-left:0%;
	}
}
</style>
сделать примерно так:
<style>
.ani1 {
	margin-left:100%;
}
.ani2 {
	margin-left:0%;
}
@keyframes my {
	from ani1;
	to ani2;
}</style>

voraa 20.05.2021 07:09

Нет

рони 20.05.2021 07:50

Paguo-86PK,
можно сами значения забить в переменные ...
<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
 <style>
 div{
        width:100px;
        height:100px;
        animation: my 5s ease-in-out infinite;
        background-color: #A8A8A8;
        --max: 100%;
        --min: 0%;
    }

@keyframes my {
    from {
        margin-left:var(--max);
    }
    to {
        margin-left:var(--min);
    }
}
</style>
</head>

<body>
<div></div>
</body>
</html>

Paguo-86PK 20.05.2021 18:36

Цитата:

Сообщение от рони (Сообщение 536869)
можно сами значения забить в переменные ...

Спасибо. Наверное, буду ждать CSS5…:D


Часовой пояс GMT +3, время: 08:16.