我用 CSS animations 创建了一个旋转齿轮.现在我希望整个旋转齿轮 div 从 1%
开始动画。至 110%
至 100%
然后回到1%
.或者基本上是 1px
至 90px
至 80px
(正常尺寸)然后回到 1px
.
现在我在 #spinner
中的元素上使用 jQuery div 正在为其设置动画,但它仍然处于关闭状态。动画应该像 CSS 过渡比例一样,从 1% 放大到 110%。目前我的动画偏离了中心。
有什么想法吗?
jsFiddle:http://jsfiddle.net/leongaban/d7UjD/681/ 强>
新代码笔:http://codepen.io/leongaban/pen/wJAip
我是否必须为 #spinner
中的每个元素设置动画?分区?
用于放大和缩小动画的 jQuery:
function firstAnimate() {
$('#spinner').animate({width: "110px", height: "110px"}, secoundAnimate);
}
function secoundAnimate() {
$('#spinner').animate({width: "80px", height: "80px"}, 'slow', thirdAnimate);
}
function thirdAnimate() {
$('#spinner').animate({width: "1px", height: "1px"}, 'fast', fourthAnimate);
}
function fourthAnimate() {
$('#spinner').hide;
}
firstAnimate();
我的纺车 HTML:
<div id="spinner">
<div id="logo">
<img src="http://leongaban.com/_codepen/whoat/loader-logo.png"/>
</div>
<div id="gear" class="spin">
<img src="http://leongaban.com/_codepen/whoat/loader-gear.png"/>
</div>
</div>
CSS:
#spinner {
position: absolute;
width: 80px; height: 80px;
top: 35%; left: 50%;
margin-left: -40px;
background: blue;
}
#logo {
position: absolute; top: 0; left: 0; width: 80px; height: 80px; z-index: 3;
}
#logo img { width: 100%; height:100%; }
#gear {
position: absolute; top: 0; left: 0;
-webkit-transition: -webkit-transform 0.1s;
transition: transform 0.1s;
-webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
transform: translateX(100%) translateY(-100%) rotate(45deg);
z-index: 2;
}
#gear img { display:block; }
最佳答案
我不得不结合使用 CSS scale 和 jQuery 来获得我想要的效果。
Scale 可以毫不费力地从中心向上扩展,thx @Zeaklous
http://codepen.io/leongaban/pen/wJAip
需要一个类来向上动画和一个向下动画:
.animateUp {
-webkit-animation: animateUp .5s ease-in-out;
animation: animateUp .5s ease-in-out;
}
.animateDown {
-webkit-animation: animateDown .5s ease-in-out;
animation: animateDown .5s ease-in-out;
}
@-webkit-keyframes animateUp {
0% {
-webkit-transform: scale(.1);
transform: scale(.1);
}
70% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes animateDown {
0% {
-webkit-transform: scale(1);
transform: scale(.1);
}
100% {
-webkit-transform: scale(.1);
transform: scale(.1);
}
}
jQuery,所以我可以控制它何时进出动画:
$('#animate-up').unbind('click').bind('click', function() {
$('#spinner').removeClass('animateDown');
$('#spinner').addClass('animateUp');
console.log('animate up');
});
$('#animate-down').unbind('click').bind('click', function() {
$('#spinner').removeClass('animateUp');
$('#spinner').addClass('animateDown');
console.log('animate down');
});
关于jquery - 如何为这些嵌套的 div 元素设置动画大小? (jQuery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19008458/