CSS从中心向右下方过渡 [英] CSS transition to bottom-right from center

问题描述

我有一个要求，其中的容器正在拉伸整个页面。当我点击容器时，它应该变得更小。

这应该发生在动画。我尝试css转换，其动画的拉伸元素到顶部：

• 向右上方移动时向所提供的尺寸缓慢缩小

但我想要的是

• 然后通过动画移动到页面右下角。

小提琴

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 和动画可以尝试结合 c> 即使你只能使用动画：

  #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 forward; 
} 
 #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-delay p>

演示

上面的演示使用负边距来定位div，它的优点是很好的支持，但是我们必须在更改div的大小时更改负边距的值。另一种方法是使用 translate 变换，这将大大集中div，但它需要浏览器来支持变换功能。这里是使用 translate 而不是将

这里是另一个仅使用 animation 的解决方案，该转换仅用于动画颜色变化。

演示3 。

UPDATE ：以上所有演示对支持 / em> 功能。但很遗憾， IE9 不支持此功能。我已经尝试使用一些解决方法，我已经找到一个解决方案通过使用多转换。第一个转换持续 0.5s ，而第二个转换将在 0.5s 后开始。要从中心到右下角为div设置动画，必须对 translate 转换使用 transition 。这是它应该是的代码：

  #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; 
} 
  

更新演示。

I have a requirement in which the container is stretching all over the page. when I click on the container, it should become smaller.

This should happen with animation. I tried css transition which is animating the stretched element to top:

• shrinking slowly to the provided dimensions while moving towards top-right

but what I want is

• Shrink in middle and then move to bottom-right of the page by animating.

Fiddle

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;
}

How should I do this?

解决方案

You can try combining both transition and animation. Even you can use only 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;
  }
}

Please test the demo using webkit-based browsers, you can add prefixes yourself for other browsers. Note that the animation will run after the transition has been done, so we have to use animation-delay.

Demo.

The demo above uses negative margins to center the div, its advantage is well supported but we have to change the negative margins' values when changing the size of the div. Another way is using translate transform, this will center the div greatly but it requires browsers to support transform feature. Here is the demo using translate instead to center the div Demo 2.

Here is another solution using only animation, the transition is just used for animating the color changing.

Demo 3.

UPDATE: All the demos above work perfectly for browsers supporting animation feature. However it's a pity that IE9 does not support this feature. I've tried using some workaround and I've found a solution by using multi-transition. The first transition lasts for 0.5s while the second transition will start after 0.5s. To animate the div from center to bottom-right corner, you have to use transition for the translate transform. Here is the code it should be:

#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;
}

Updated Demo.

这篇关于CSS从中心向右下方过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！