时间戳

首页 > 解决方案 > CSS 过渡计时函数和动画名称

css - CSS 过渡计时函数和动画名称

问题描述

我想在页面加载后添加带有贝塞尔曲线的过渡定时功能。我有一个代码，它在悬停时可以正常工作，但我希望自动获得相同的效果。所以我使用了动画名称。但贝塞尔曲线效应似乎不起作用。不过，它在悬停时工作得很好。

<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>

标签： csscubic-bezier

解决方案

过渡和动画是 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>

推荐阅读