您可以尝试将两者结合起来transition
and animation
。即使你只能使用animation
here:
#main {
position: fixed;
height: 100%;
width: 100%;
left:0;
top:60px;
background-color: red;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click:hover + #main {
position: fixed;
width: 100px;
height: 50px;
left: 50%;
top: 50%;
margin-left:-50px;
margin-top:-25px;
background-color: green;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-animation: to-bottom-right 0.5s 0.5s forwards;
}
#click {
width: 100px;
height: 50px;
background-color: cornflowerblue;
color: white;
font-weight: bold;
text-align: center;
}
@-webkit-keyframes to-bottom-right {
100% {
left: 100%;
top: 100%;
margin-left:-100px;
margin-top:-50px;
}
}
请使用基于 webkit 的浏览器测试演示,您可以为其他浏览器自行添加前缀。请注意,animation
将在转换完成后运行,所以我们必须使用animation-delay
.
Demo. http://jsfiddle.net/tyuAk/11/
上面的演示使用负边距使 div 居中,其优点得到了很好的支持,但我们必须在更改 div 大小时更改负边距的值。另一种方法是使用translate
变换,这将使div大大居中,但需要浏览器支持变换功能。这是使用的演示translate
而是将 div 居中Demo 2 http://jsfiddle.net/viphalongpro/tyuAk/14/.
这是另一种仅使用的解决方案animation
,过渡仅用于动画颜色变化。
Demo 3 http://jsfiddle.net/viphalongpro/tyuAk/16/.
UPDATE:上面的所有演示都可以完美地支持支持的浏览器动画片特征。然而遗憾的是IE9不支持此功能。我尝试使用一些解决方法,并通过使用多重转换找到了解决方案。第一次转换持续时间0.5s
而第二次转换将在之后开始0.5s
。要将 div 从中心移动到右下角的动画,您必须使用transition
为了translate
转换。这是它应该是的代码:
#main {
position: fixed;
height: 100%;
width: 100%;
left:0;
top:60px;
background-color: red;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#click:hover + #main {
position: fixed;
width: 100px;
height: 50px;
left: 50%;
top: 50%;
margin-left:-50px;
margin-top:-25px;
background-color: green;
-webkit-transform:translate(50vw , 50vh) translate(-50%,-50%);
-ms-transform:translate(50vw , 50vh) translate(-50%,-50%);
-moz-transform:translate(50vw , 50vh) translate(-50%,-50%);
transform:translate(50vw , 50vh) translate(-50%,-50%);
-webkit-transition: all 0.5s ease, -webkit-transform 0.5s 0.5s ease;
-ms-transition: all 0.5s ease, -ms-transform 0.5s 0.5s ease;
-moz-transition: all 0.5s ease, -moz-transform 0.5s 0.5s ease;
transition: all 0.5s ease, transform 0.5s 0.5s ease;
}
#click {
width: 100px;
height: 50px;
background-color: cornflowerblue;
color: white;
font-weight: bold;
text-align: center;
}
更新演示 http://jsfiddle.net/tyuAk/19/.