Question

我想使用CSS关键帧同时为元素的底部位置和不透明度设置动画。

我的元素不透明度是动画，但底部位置不是。

.custom-fade-down{
-webkit-animation: 23s ease 0s normal forwards 1 custom-down;
-moz-animation: 23s ease 0s normal forwards 1 custom-down;
    animation: 23s ease 0s normal forwards 1 custom-down;
}

@keyframes custom-down {
    from {
        opacity: 0;
        bottom: 10px;
    }

    to {
        opacity: 1;
        bottom: 1px;
    }
}

Answer 1

你的解决方案很接近。将position: relative;添加到.custom-fade-down类，以便bottom道具生效。

$('div').addClass('custom-fade-down');

.custom-fade-down {
  width: 100px;
  height: 100px;
  bottom: -100px;
  background-color: black;
  -webkit-animation: 23s ease 0s normal forwards 1 custom-down;
  -moz-animation: 23s ease 0s normal forwards 1 custom-down;
  animation: 23s ease 0s normal forwards 1 custom-down;
}

@keyframes custom-down {
  from {
    opacity: 0;
    bottom: -100px;
  }
  to {
    opacity: 1;
    bottom: 0px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position: relative;"></div>

多个属性上的CSS动画

1 个答案: