CSS3的Webkit CSS动画：调整一个div矩形

我想了解是否可以复制方法animate jQuery中，使用WebKit的动画CSS3的Webkit CSS动画：调整一个div矩形

假设我用50 PX 有一个div 50像素的使用jQuery我可以容易调整和使用它的动画：

$('#mybox').animate({'width':'100px','height':'70px'}, 300) 

// so from 50x50 it animates to 100x70 
// the values 100 and 70 should ba dynamically 
// input so i can create a function (Width,Height) to alter my box

我不知道如何做同样的，如果可能的话使用CSS的WebKit的动画

PS。我不需要他们在Firefox的工作，仅仅是一个Safari /铬

来源

2012-04-13 Francesco

你可以使用这个CSS项目：

div.mybox { 
    width: 50px; 
    height: 50px; 
    background-color: red; 
    -webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    -moz-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    -o-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    transition:width 300ms ease-in-out, height 300ms ease-in-out; 
}

然后你就可以使用更新width和height属性的jQuery：

$(document).ready(function() { 
    $("div.mybox").css({"width": "100px", "height": "70px"}); 
});

所以，如果浏览器支持它，这将是动画。但是，当然，可以考虑将这些属性放在一个单独的类中，并将该类添加到元素中。你可以像这样使用.addClass（）函数。

$(document).ready(function() { 
    $("div.mybox").addClass("enlarged"); 
});

或者，例如，你可以用toggleClass功能和click事件（点击时的盒子将被放大，并且将改变为正常大小再次点击时）使用它。

$(document).ready(function() { 
    $("div.mybox").click(function() { 
     $(this).toggleClass("enlarged"); 
    }); 
});

在这种情况下，属性应该在CSS类中定义。

div.mybox.enlarged { 
    width: 100px; 
    height: 70px; 
}

另外，如果你希望动画在鼠标上发生，那么所有你需要添加的是：

这种

div.mybox:hover { 
    width: 100px; 
    height: 70px; 
}

动画可以在不使用JS在所有被执行。

此外，你应该阅读约CSS3 transition attribute和转换函数（它们可以在许多情况下使用）。它们被描述为here。

来源

2012-04-13 15:55:18 aruseni

为什么这个人得票低？ – 2012-04-13 16:35:58

你可以让一个JSFiddle – 2014-03-09 05:51:11

@keyframes animationName { 
    0% {width: 50px; height:50px} 
    100% {width: 100px; height:70px} 
}

看看这个： http://www.css3files.com/animation/

来源

2012-04-13 15:57:55 WolvDev

mmm不确定它有帮助，我需要动态输入div的大小 – Francesco 2012-04-13 16:27:36

如果你想动态输入大小，你只能用JS来这样做。 – WolvDev 2012-04-13 16:41:25

不，你不知道。这里是：http://jsfiddle.net/4zD74/。您也可以将其添加为新的样式表。 – Mircea 2012-04-17 00:36:59

您可以通过应用CSS作为一个新的样式表或者内嵌样式在这种情况下使用CSS动画和过渡与“动态”的值：

http://jsfiddle.net/4zD74/

来源

2012-04-17 00:36:04 Mircea

CSS3会让你很容易！它将添加一个转换，并且您可以使用:hover更改尺寸。这里的示例div：

<div id="mydiv"> 
    <!-- Div content goes here --> 
</div>

因此，你的div是“mydiv”。其余的是在CSS3完成：

#mydiv { 
    width: 50px; 
    height: 50px; 
    background: #f34543; 
    -webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    -moz-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    -o-transition:width 300ms ease-in-out, height 300ms ease-in-out; 
    transition:width 300ms ease-in-out, height 300ms ease-in-out; 
} 
#mydiv:hover { 
    width: 100px; 
    height: 70px; 
}

的jsfiddle：http://jsfiddle.net/dakoder/ZGHLM/

这就是它！它会将其从50x50px调整为100x70px。测试Chrome浏览器，但没有Safari浏览器。

来源

2013-05-13 21:30:19 DaKoder

这是最好的答案！ – 2014-03-09 05:52:04

CSS3的Webkit CSS动画：调整一个div矩形

回答

相关问题