Как управлять тенью элемента с помощью CSS?
Я играю с анимированной тенью. Я хочу, чтобы это работало так: когда я нажимаю на поле, я хочу, чтобы был добавлен класс «тень». Когда это произойдет, я хочу оживить тень, как будто она поднимается вверх, а при удалении класса я хочу, чтобы тень исчезла так же, как она появляется (в обратном направлении). Я создал ключевые кадры и изменил размытие и непрозрачность. Одна вещь, которую я заметил, это то, что анимация не плавная, она идет поэтапно. Почему это так? Я хочу, чтобы анимация теней была плавной. Во-вторых, как создать эту тень, которая также исчезнет в обратном порядке при удалении класса?
Вот мой код:
const box = document.querySelector(".box");
function shadowHandle(){
box.classList.toggle("shadow");
}
box.addEventListener("click", shadowHandle);body{
margin: 100px;
}
.box{
width: 100px;
height: 300px;
background-color: red;
}
@-webkit-keyframes shadow { /* Webkit */
0% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
25% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
@-moz-keyframes shadow { /* Webkit */
0% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
25% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
@keyframes shadow { /* Webkit */
0% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
25% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
.shadow {
animation: shadow 2s forwards; /* CSS3 */
-moz-animation: shadow 2s forwards; /* Firefox */
-webkit-animation: shadow 2s forwards; /* Webkit */
}<div class = "box shadow"></div>
Ответы 4
Этого можно просто достичь с помощью transition
.
Следуйте приведенному ниже фрагменту:
Добавьте box-shadow в класс shadow
теперь добавьте CSS transition в .box.
transition: all 1s linear
Это будет анимировать свойства css все, которые можно анимировать.
На срок 1 с
По ставке линейный. Другие значения: ease, ease-in, ease-out и т. д.
Поиграйте и узнайте.
const box = document.querySelector(".box");
function shadowHandle() {
box.classList.toggle("shadow");
}
box.addEventListener("click", shadowHandle);body {
margin: 100px;
}
.box {
width: 100px;
height: 300px;
background-color: red;
transition: all 1s linear;
}
.shadow {
box-shadow: -4px 0px 40px rgba(0, 0, 0, 1);
}<div class = "box"></div>Да вот для чего предназначены ease-out и другие значения ... Уже упоминалось в моем ответе
Я думаю, что здесь лучше всего использовать переход. Он оживит "середину анимации".
вот пример с: hover, но вы также можете использовать добавленный класс.
.box{
width: 100px;
height: 100px;
background: silver;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease-in-out;
}
.box:hover {
box-shadow: -4px 0px 40px rgba(0, 0, 0, 1);
}<div class = "box">
</div>Добавлен еще один класс анимации no-shadow с обратными стилями.
@-webkit-keyframes no-shadow { /* Webkit */
0% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
25% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
@-moz-keyframes no-shadow { /* Webkit */
0% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
25% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
@keyframes no-shadow { /* Webkit */
0% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
25% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
.no-shadow {
animation: no-shadow 2s forwards; /* CSS3 */
-moz-animation: no-shadow 2s forwards; /* Firefox */
-webkit-animation: no-shadow 2s forwards; /* Webkit */
}
const box = document.querySelector(".box");
function shadowHandle(){
box.classList.toggle("shadow");
box.classList.toggle("no-shadow");
}
box.addEventListener("click", shadowHandle);body{
margin: 100px;
}
.box{
width: 100px;
height: 300px;
background-color: red;
}
@-webkit-keyframes shadow { /* Webkit */
0% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
25% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
@-moz-keyframes shadow { /* Webkit */
0% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
25% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
@keyframes shadow { /* Webkit */
0% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
25% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
100% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
}
.shadow {
animation: shadow 2s forwards; /* CSS3 */
-moz-animation: shadow 2s forwards; /* Firefox */
-webkit-animation: shadow 2s forwards; /* Webkit */
}
@-webkit-keyframes no-shadow { /* Webkit */
0% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
25% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
@-moz-keyframes no-shadow { /* Webkit */
0% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
25% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
@keyframes no-shadow { /* Webkit */
0% { box-shadow: -4px 0px 40px rgba(0, 0, 0, 1); }
25% { box-shadow: -3px 0px 30px rgba(0, 0, 0, 0.9); }
50% { box-shadow: -2px 0px 20px rgba(0, 0, 0, 0.7); }
75% { box-shadow: -1px 0px 15px rgba(0, 0, 0, 0.5); }
100% { box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); }
}
.no-shadow {
animation: no-shadow 2s forwards; /* CSS3 */
-moz-animation: no-shadow 2s forwards; /* Firefox */
-webkit-animation: no-shadow 2s forwards; /* Webkit */
}<div class = "box shadow"></div>Спасибо. Но я вижу ту же проблему. Если вы посмотрите на анимацию тени, вы увидите, что тень растет ступенчато, а не плавно. Почему это так?
потому что вы используете ключевые кадры для создания этой анимации. ваши изменения происходят с шагом 25%, 50% и т. д. попробуйте использовать свойство перехода, как предлагается в других ответах, чтобы получить плавный переход.
Это означает, что с ключевыми кадрами у вас не будет плавной анимации, но вы получите контроль над каждым шагом. С переходом вы получаете плавную анимацию, но не так много контроля?
да вроде вот что я имел в виду. :) попробуйте более мелкий пример с шагом 10% и посмотрите, сглаживается ли анимация!
О, ладно, теперь я понял. Спасибо :). Я думал, они работают так же, только один с большим количеством элементов управления. Тогда переход - это то, что мне нужно :)
Вам не нужны ключевые кадры. Это намного проще с переходом
const box = document.querySelector(".box");
function shadowHandle(){
box.classList.toggle("shadow");
}
box.addEventListener("click", shadowHandle);body{
margin: 100px;
}
.box{
width: 100px;
height: 300px;
background-color: red;
box-shadow: none;
transition: all 1s ease;
}
.box.shadow {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}<div class = "box"></div>Хм, мне нравится это простое решение. Думаю, здесь я могу управлять размытием и непрозрачностью? Просто добавив дополнительные параметры с помощью ","?
Конечно, вы можете изменить прозрачность, изменив последнее значение rgba (). Также вы можете изменить размер.
Что мне здесь не хватает, так это то, что у меня нет контроля над размытием. Я хочу, чтобы размытие было жестким в начале и мягким в конце (когда анимация доходит до конца). Возможен ли здесь такой контроль?