CSS 从中心过渡到右下角

我有一个要求，其中容器在整个页面上伸展。当我单击容器时，它应该变小。

这应该发生在动画中。我尝试了 css 过渡，它将拉伸的元素动画到顶部：

• 慢慢缩小到提供的尺寸，同时向右上角移动

但我想要的是

• 中间缩小，然后通过动画移动到页面右下角。

Fiddle http://jsfiddle.net/tyuAk/

CSS

#main {
    position: fixed;
    height: 100%;
    width: 100%;
    margin-top: 50px;
    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;
    margin-top: 50px;
    background-color: green;
    transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
}
#click {
    width: 100px;
    height: 50px;
    background-color: cornflowerblue;
    color: white;
    font-weight: bold;
    text-align: center;
}

我该怎么做？

您可以尝试将两者结合起来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/.