CSS Функция времени перехода и название анимации - PullRequest
Новая
       0

CSS Функция времени перехода и название анимации

0 голосов
/ 27 мая 2020

Я хочу добавить функцию времени перехода с кривой Безье после загрузки страницы. У меня есть код, и он отлично работает при наведении курсора, но мне нужен тот же эффект автоматически. Поэтому я использовал имя анимации. Но эффект кривой Безье, похоже, не работает. Тем не менее, он отлично работает при наведении курсора. 

<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width .6s;
  transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
  animation: mymove .6s;

}

@keyframes mymove {
 from {
    transform: translate(0px, 400px);
  }
  to {
    transform: translate(0px, 0px);
  }
}

div:hover {
  width:300px;
}
</style>
</head>
<body>



<div></div>


</body>
</html>

1 Ответ

0 голосов
/ 27 мая 2020

Переход и анимация - разные свойства в css. У анимации есть собственная временная функция. Более подробную информацию можно получить на w3school . 

<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width .6s;
  transition-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
  animation: mymove 2s;
  animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
  
}

@keyframes mymove {
 from {
    transform: translate(0px, 400px);
  }
  to {
    transform: translate(0px, 0px);
  }
}

div:hover {
  width:300px;
}
</style>
</head>
<body>



<div></div>


</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...