css3过渡是元素从一种样式逐渐改变为另一种的效果。
实现过渡须定义两项内容：
指定要添加效果的css属性
指定效果的持续时间。
案例：
div {width：100px;height:100px;background:width 2s;transition:width 2s;
}解析:应用于宽度属性的过渡效果，时长2秒。
*如果未指定的期限，transition将没有任何效果，因为默认值是0。
css属性的值更改时效果会发生变化。一个典型css属性的变化时用户鼠标放在一个元素上时：
div:hover{width:300px;
}解析：当实例中，当鼠标光标移动到该元素时，它逐渐改变原有样式。
transition-timing-function 属性规定过渡效果的速度曲线。
transition-timing-function 属性可接受以下值：
ease 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear 规定从开始到结束具有相同速度的过渡效果
ease-in 规定缓慢的过渡效果
ease-out 规定缓慢结束的过渡效果
ease-in-out 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) 允许您在三次贝塞尔函数中定义自己的值
#div1{ transition-timing-function:linear;}
#div2{ transition-timing-function:ease;}
#div3{ transition-timing-function:iase-in;}
#div4{ transition-timing-function:ease-out;}
#div5{ transition-timing-function:ease-in-out;}案例：
<style>.div1{width: 300px;height: 300px;border-radius: 30%;background-color: lightpink;transition: all 5s cubic-bezier(0,1.9,1,-2.47);/*过渡 速度 过渡曲线*//* transition-timing-function: steps(5,steps); */} .div1:hover{height: 400px;width: 600px;background-color: mediumorchid;}</style>
</head>
<body><div class="div1"></div>
</body>css可以创建动画，它可以取代许多页面动画图像，Flash动画和JavaScript实现的效果。
如果你在@keyframes规则中指定了css样式，动画将在特定时间逐渐从当前样式更改为新样式。
要使动画生效，必须将动画绑定到某个元素。
@keyframes div_animation {from{margin-left: 0;}to{margin-left: 500px;}animation-delay 属性规定动画开始的延迟时间。
anieation-direction属性指定是向前播放、向后播放还是交替播放动画.
animation-direction 底性可接受以下值:
normal-动画正常播放(向前)。默认值
Teverse动画以反方向播放（向后)
alternate-动画先向前播放，然后向后
alternate-reverse -动画先向后播放,然后向前
animation-timing-funetion网性规定动画的速度曲线。
animation-timing-function属性可接受以下值:
ease-指定从慢速开始,然后加快,然后缓慢结束的动画（默认)
linear-规定从开始到结束的速度相同的动画
ease-in -规定慢速开始的动画
ease-outT规定慢速结束的动画
ease-in-out-指定开始和结束较慢的动画
cubic-bezier(n,n,n,n)的·运行您在三次贝塞尔函数中定义自己的值
CSS动画不会在第一个关健帧播放之前或在最后一个关键帧播放之后影响元素。 animation-fill-node 属性能够覆盖这种行为。
在不播放动画时(在开始之前，结束之后，或两者都结束时)，animation-fil-mode属性规定目标元素的样式. animation-fill-mode同性可接受以下值:
none-致认值。动画在执行之前或之后不会对元素应用任何样式。
foriards-元素将保器由最后一个关键帧设置的样式值(依赖animation-direction 和 animation-iteration-count) .
baclceards·元素将获取由第一个关键桢设誉的样式值《取决于animatian-ditection)，并在动画廷迟期可保留该值。
both -动画会同时逶循向前和向后的规则，从而在两个方向上扩展动画属性。
本文发布于:2024-02-01 06:50:55，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/170674145734680.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
