Правое и нижнее свойство CSS не работает

avatar
Masudur Rahman
8 августа 2021 в 18:40
135
3
1

HTML-код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Review of animation</title>
    <link rel="stylesheet" href="animation.css">
</head>
<body >
    <div></div>
</body>
</html>

Код CSS:

div{
    width:50px;
    height: 50px;
    background-color:darkorange;
    animation-name: rotation;
    animation-duration: 2s;
    position:absolute;
    animation-iteration-count: 1;

}

@keyframes rotation {
    0%{
        background-color: darkorange;
        top:0px;
        left:0px;
        
    }
    25%{
        background-color: darksalmon;
        top:0px;
        right:0px;
        
    }
    50%{
        background-color:deepskyblue;
        right: 0px;
        bottom:0px;
        
    }
    75%{
        background-color: lightblue;
        bottom:0px;
        left:0px;
    }
    100%{
        background-color: darkorange;
        left:0px;
        top:0px;
    }
    
}

Я пытаюсь получить окно, анимирующее каждый угол экрана браузера, но из-за неправильной работы правого и нижнего свойств анимация зависает в углу. Обходной путь вместо right=0 использование left=100% работает, но мой вопрос: почему right=0 не работает?

Источник

Ответы (3)

avatar
amirify
8 августа 2021 в 20:10
1

Если вы хотите, чтобы он перемещался, вы должны использовать только верхний и левый и задавать им значения в px следующим кодом:
Изменить: лучше использовать css transforms для анимации, потому что они аппаратно ускорены и имеют более плавный переход. 

#object {
  width:100px;
  height:100px;
  background-color:black;
  position: relative;
  left: 0;
  top: 0;
  animation-name: animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

#object2 {
  width:100px;
  height:100px;
  background-color: blue;
  position: relative;
  left: 200px;
  animation-name: accelarated;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}


@keyframes animation {
  0% {left: 0; top:0;}
  25% {left: 100px; top:0;}
  50% {left: 100px; top:100px;}
  75% {left: 0; top:100px;}
  100% {left: 0; top:0;}
}

@keyframes accelarated {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(100px, 0);
  }
  50% {
    transform: translate(100px, 100px);
  }
  75% {
    transform: translate(0, 100px);
  }
  100% {
    transform: translate(0, 0);
  }
}
<div id="object"></div>
<div id="object2"></div>
Masudur Rahman
9 августа 2021 в 06:53
0

Вы только что усовершенствовали решение. Но опять же, почему право и низ не могут совершать путешествия?

avatar
Alek Smith
8 августа 2021 в 19:20
0

Поскольку вы уже установили левое значение = 0 и ширину 50 пикселей, если вы не установили левое значение в значение unset, правое = 0 не будет работать. они не могут быть совместимы. слева = 0 и справа = 0, тогда ширина должна быть 100%, но имеет липкое значение для 50 пикселей;

Итак, вы можете сделать так.

<div class="container">
    <div class="child"></div>
</div>


.container{
  position: relative;
  width: 300px;
  height: 300px;
  background-color: red
}
.child{
    width:50px;
    height: 50px;
    background-color:darkorange;
    animation-name: rotation;
    animation-duration: 2s;
    position:absolute;
    animation-iteration-count: 3;
    top: 0px;
    left: 0px;
}

@keyframes rotation {
    0%{
        background-color: darkorange;
        top:0px;
        left:0px;
    }
    25%{
        background-color: darksalmon;
        top: 0px;
        left: calc(100% - 50px)
    }
    50%{
        background-color:deepskyblue;
        top: calc(100% - 50px);
        left: calc(100% - 50px)
    }
    75%{
        background-color: lightblue;
        top: calc(100% - 50px);
        left: 0px;
    }
    100%{
        background-color: darkorange;
        top:0px;
        left:0px;
    }
}
avatar
amirify
8 августа 2021 в 19:05
1

Если вы хотите установить позицию, вы также должны сбросить две другие позиции до исходного значения, которое равно auto. Также, когда значение равно 0, нет необходимости использовать px.

div{
    width:50px;
    height: 50px;
    background-color:darkorange;
    animation-name: rotation;
    animation-duration: 2s;
    position:absolute;
    animation-iteration-count: 1;

}

@keyframes rotation {
    0%{
        background-color: darkorange;
        top: 0;
        left: 0;
        right: auto;
        bottom: auto;
        
    }
    25%{
        background-color: darksalmon;
        top:0;
        left: auto;
        right: 0;
        bottom: auto;
        
    }
    50%{
        background-color:deepskyblue;
        top:auto;
        left:auto;
        right: 0;
        bottom: 0;
        
    }
    75%{
        background-color: lightblue;
        top:auto;
        left:0;
        right: auto;
        bottom: 0;
    }
    100%{
        background-color: darkorange;
        top:0;
        left:0;
        right: auto;
        bottom: auto;
    }
    
}
<div></div>
Masudur Rahman
8 августа 2021 в 19:24
0

Спасибо @amirify за решение проблемы. Но как автоматически определить значение?

amirify
8 августа 2021 в 19:29
0

Авто Позволяет браузеру вычислять положение от края. Это по умолчанию. Позиции, имеющие значение, а не auto, определяют позицию элемента.

Masudur Rahman
8 августа 2021 в 19:43
0

Еще раз спасибо @amirify, одна проблема: я хочу, чтобы коробка перемещалась за угол, а не выскакивала из каждого угла.