@-webkit-keyframes fade { from {opacity: 0.4} to {opacity: 1} } @keyframes fade { from {opacity: 0.4} to {opacity: 1} }
时间: 2024-05-08 16:11:25 浏览: 87
H5 @font-face 和 @keyframes 的使用
这是CSS中定义淡入动画的关键帧。其中@-webkit-keyframes是针对webkit内核的浏览器,@keyframes是针对其他浏览器的。这段代码定义了一个从0.4不透明度到1不透明度的淡入动画。可以通过将该动画应用于元素来实现淡入效果。例如:
```css
.fade-in {
animation-name: fade;
animation-duration: 1s;
}
@-webkit-keyframes fade {
from {opacity: 0.4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: 0.4}
to {opacity: 1}
}
```
这将在1秒钟内将元素从0.4不透明度淡入到完全不透明。
阅读全文