CSS3 过渡动画示例学习代码参考

CSS3 过渡动画属性。

1。 Transition-property 设置转场的属性，例如：width height background-color
2. Transition-duration 设置转场时间，例如：1s 500ms
3.transition-timing-function 设置转场常用的运动方法是线性的（匀速） | simple（运动缓冲）
4. Transition-delay 设置动画延迟
5. Transition：属性持续时间定时功能 delay 同时设置四个属性

看看上面的参数也许你不明白。我们来写一个改变div的动画的例子来看看。

先写div

，然后写hover事件。当鼠标向上移动时，设置s:500px

写完hover事件后，只要鼠标向上移动，div就会立即变长。 。然后鼠标移开，div 立即变回来。
过程很快，没有过渡的感觉。那你能写一段转瞬即逝的感觉吗？

transition：属性duration 首先使用前两个动画参数来设置动作的持续时间

将动作设置为宽度并更改宽度。持续时间为 1 秒。这时，当鼠标向上移动时，会在1秒内慢慢完成500像素的扩展。它不会立即改变。

而且这个缓慢的过程是可以控制的。我们来看第三个参数。 ？ ）

然后还可以添加延迟效果。？背景颜色变化动画

综合练习：

创建鼠标移动到图像时图像描述缩进效果

基本显示如下：

设置文字部分的透明度和字体颜色

敲击上面的边框动画效果即可实现插入效果