我正在尝试创建一个盒子淡入的效果,并随着它淡入而“增长”一点。
盒子以 display:none
和 transform: scale(0.8,0.8)
开始,所以它比原来的小 0.2。
随着它逐渐消失,我希望它也能按比例放大为 scale(1,1)
我在 5000
延迟后使用 jQuery 处理淡入,然后我使用 jQuery 将新样式附加到框。
我有 transition: transform 1s;
来处理从 0.8
到 1
的平滑过渡,但它似乎不起作用.
$( document ).ready(function() {
console.log( "ready!" );
$(".modal-newsletter-wrap").delay(5000).fadeIn( "slow", function() {
});
$(".modal-newsletter").delay(6000).css( "transform", "scale(1,1)" );
});
这是CSS
.modal-newsletter{transition: transform 1s;transform:scale(0.8,0.8);position:fixed;}
包含的 JSFiddle 显示它淡入(等待几秒钟)但它以完整的 1
大小而不是 0.8
淡入。
最佳答案
jQuery 不是必需的,使用简单的 CSS3 动画代替:http://codepen.io/anon/pen/xbMWXL
@-webkit-keyframes overlay {
0% { -webkit-transform: scale(.8); opacity: 0; }
100% { -webkit-transform: scale(1.1); opacity: 1; z-index: 1 }
}
@-moz-keyframes overlay {
0% { -moz-transform: scale(.8); opacity: 0; }
100% { -moz-transform: scale(1.1); opacity: 1; z-index: 1 }
}
@keyframes overlay {
0% { transform: scale(.8); opacity: 0; }
100% { transform: scale(1.1); opacity: 1; z-index: 1 }
}
.modal-newsletter-wrap {
width: 100px;
height: 100px;
background: #ccc;
/* start with a negative z-index so the user may interact with the page
the actual z-index is set on the last animation keyframe */
position: fixed;
z-index: -1;
opacity: 0;
-webkit-transform: scale(.8);
-webkit-animation: overlay 1s linear 5s 1 forwards;
-moz-transform: scale(.8);
-moz-animation: overlay 1s linear 5s 1 forwards;
transform: scale(.8);
animation: overlay 1s linear 5s 1 forwards;
}
效果在 5 秒延迟后开始,效果持续时间设置为 1 秒。当它消失时,元素缩放到 1.1。动画保留最后一帧(animation-fill-mode
属性设置为 forwards
)
关于jquery - 使用变换比例、jQuery 和 CSS3 淡入淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29253529/