CSS-переходы для различных значений стиля - PullRequest
Новая
       12

CSS-переходы для различных значений стиля

0 голосов
/ 20 марта 2019

Я работаю над улучшением CSS-анимации и переходов.Я пытаюсь сделать переход от квадрата к кругу и наоборот более плавным.Я знаю, что мне нужно использовать метод transition в CSS, чтобы контролировать это.

2 вопроса:

  1. Почему метод transition не работает в приведенном ниже фрагменте кода?
  2. Как мне создать различные свойства transitionдля каждого изменяющегося значения?то есть 1 время перехода для изменения радиуса границы, 1 время перехода для перемещения круга туда, где находится квадрат, и т. д. 

.container-flex {
  display: flex;
  width: 500px;
  height: 250px;
  border: 1px solid black;
  background-color: rgb(0,0,255);
  }

.circle {
  width: 200px;
  height: 200px;
  background-color: rgba(255,0,0,0.5);
  border-radius: 100px;
  transition: all 1s alternate;
  }
  
.circle:hover {
  border-radius: 0;
  }
  
.square {
  width: 200px;
  height: 200px;
  background-color: rgba(0,255,0,0.5);
  transition: all 1s alternate;
  }
  
.square:hover {
  border-radius: 100px;
  }
<html>
<body>
<div class="container-flex">
  <div class="circle"></div>
  <div class="square"></div>
</div>
</body>
</html>

1 Ответ

1 голос
/ 20 марта 2019 

.container-flex {
  display: flex;
  width: 500px;
  height: 250px;
  border: 1px solid black;
  background-color: rgb(0,0,255);
  }

.circle {
  width: 200px;
  height: 200px;
  background-color: rgba(255,0,0,0.5);
  border-radius: 100px;
  transition: all 1s ease;
  }
  
.circle:hover {
  border-radius: 0;
  }
  
.square {
  width: 200px;
  height: 200px;
  background-color: rgba(0,255,0,0.5);
  transition: all 1s ease;
  }
  
.square:hover {
  border-radius: 100px;
  }
<html>
<body>
<div class="container-flex">
  <div class="circle"></div>
  <div class="square"></div>
</div>
</body>
</html>
...