具体 css 转换

Question

我想在屏幕外存储一些图像，这些图像由 button:active 激活。

样式：

.image {
    opacity: 0;
    position: fixed;
    top: -500px;
    left: 20%;
    transition:0.5s;
 }
 .button1:active .image01 {
    opacity: 1;
    top:5%;
    left:20%;
 }

我希望它们从不透明度 0 淡入到不透明度 1。但是，当我输入过渡属性时，它会同时设置不透明度和位置的动画。有什么方法可以只对不透明度进行动画处理并使位置即时变化吗？

Answer 1

只需将属性（在您的情况下为 opacity）添加到转换中，如下所示：

.image {
    opacity: 0;
    position: fixed;
    top: -500px;
    left: 20%;
    transition:opacity 0.5s;
 }
 .button1:active .image01 {
    opacity: 1;
    top:5%;
    left:20%;
 }

转换有 4 个属性，可以像这样单独定义：

transition-property: opacity; /*Default value is all */
transition-duration: 2s; /* Default value is 0 (no transition effect) */
transition-timing-function: linear; /* Default value is linear */
transition-delay: 1s; /* Default value is 0 */

或使用 shorthand 属性 :

transition: opacity 2s linear 1s;

因此，如果您省略某些属性，它们将采用默认值。

阅读更多关于 transition

具体 css 转换

Specific css transitioning

css

transition

image