HTML表单上的CSS动画

Question

这是我尝试重新创建的示例： https : //www.hioscar.com/get-quote/

• 当用户完成将信息输入到输入区域中或选择了一个选项时，当前行将进行动画处理（我相信使用平移和不透明度），并且下一行将出现。

我已经开始了一些非常基本的操作，只是为了了解它在悬停时的工作方式，但是我不确定如何完成以自己的形式复制此动画。

 div { margin-top: 500px; } div:hover { transform: translate(0px, -300px); opacity: 0.3; transition: opacity 0.05s linear; } 

 <div> <p>Hello, I am a very basic example</p> </div> 

Answer 1

因此，您遇到了几个问题，您只是在设置不透明度的动画，并且如果在将div悬停时将其从鼠标光标下方移开，它将无法正常工作。

因此，我激活了所有过渡，而不仅仅是不透明度，使div与浏览器一样高，并使用了div的内部填充。

 body, html { /* needed so that the div can also be 100% of window */ height: 100%; } div { height: 100%; padding-top: 500px; } div:hover { padding-top: 300px; transition: all 0.05s linear; } 

 <div> <p>Hello, I am a very basic example</p> </div>