标签: css-transitions

我是Twitter Bootstrap的新手(在我学习它的第二个小时:)

我想制作一个像这样的滑动过渡效果:http://webdesigntutsplus.s3.amazonaws.com/tuts/317_coming_soon/demo/index.html

我如何在Twitter Bootstrap中执行此操作.我的问题是我不知道如何处理过渡.任何代码都是有价值的.

提前致谢.

我的CSS3过渡问题:

div.one_fifth{
   border: 1px solid #48484A;
   transition : border 400ms ease-out; 
   -webkit-transition : border 400ms ease-out; 
   -moz-transition : border 400ms ease-out;
   -o-transition : border 400ms ease-out; 
   font-size: 18px;
   transition : font 300ms ease-out; 
   -webkit-transition : font 300ms ease-out; 
   -moz-transition : font 300ms ease-out;
   -o-transition : font 300ms ease-out;
}

 div.one_fifth:hover{
   border: 1px solid #ed2124;
   font-size: 20px;
 }

现在的问题是,当我定义两个过渡时,边框一个不起作用...所以看起来两个过渡干扰而字体一个覆盖边界一个...我如何整合它们,如果是这样,如何你会以不同的速度(ms)做到吗？

我正在使用CSS3过渡显示模态弹出窗口(主要是从Effeckt.css借来的).它适用于除Safari之外的所有现代浏览器.在Safari中,运动正常,但背景色不均匀.

这是代码,问题在OSX上的Safari中可见:http://jsfiddle.net/eJsZx/4/

在问题解决之前问题的屏幕截图.您可以看到div的一半正确着色为白色,一半仍然是透明的.

这是CSS的相关部分(.effeckt-show和.md-effect-8应用按钮被点击时,以显示模式):

.effeckt-modal {
  visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  background: white;
}
.md-effect-8 {
  -webkit-perspective: 1300px;
  -ms-perspective: 1300px;
  -o-perspective: 1300px;
  perspective: 1300px;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.md-effect-8 .effeckt-modal {
  -webkit-transform: rotateY(-70deg);
  -ms-transform: rotateY(-70deg);
  -o-transform: rotateY(-70deg);
  transform: rotateY(-70deg);
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
  opacity: 0;
}
.effeckt-show.md-effect-8 .effeckt-modal {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: …

我有以下HTML:

<ul>
    <li>
        <a href="#">
            <h2>title</h2>
        </a>
    </li>
     <li>
        <a href="#">
            <h2>title</h2>
        </a>
    </li>
     <li>
        <a href="#">
            <h2>title</h2>
        </a>
    </li>
</ul>

CSS

ul {
    list-style: none;  
    text-align: center;
}
ul li {
    position: relative;
    float: right;
    margin-right: 20px;
    width: 30%;
}
ul li {
    transition: all 0.3s;
}
ul li:hover {
    top: -10px;
}
ul li> a{
    color: red;
}

问题是转换不适用于moz,它适用于webkit.如何以跨浏览器的方式实现此功能？

DEMO

我正在通过CSS3工作,有点困在一个问题.

问题如下:

我的图像最初位于屏幕的左侧:

.box img{
margin-left:0;
-webkit-transition:1s;
 }

现在,在悬停时,我希望效果发生,即.当我将鼠标悬停在图像上时,将图像从左侧移动500px,代码如下:

.box img:hover{
margin-left:500px;
-webkit-transition:1s;
 }

这非常完美.唯一的问题是当我点击图像时想要获得相同的效果.那就是我希望图像在点击时从左移动500px并保持在那里.当我点击图像时,它应该再次移回原始位置.

我该怎么办呢,请解释一下!!!!

如果您将过渡如下所示,CSS过渡属性可让您在悬停和悬停时设置动画:

#inner{
    opacity:0;
    transition:opacity 2000ms;
}
#outer:hover #inner{
    opacity:1;
}

但是,如果转换移至:hover状态,则仅在悬停时发生.

#inner{
    opacity:0;
}
#outer:hover #inner{
    opacity:1;
    transition:opacity 2000ms;
}

是否可以反过来,即仅在悬停时动画？

我目前正在使用AngularJS,ngAnimate,Angular-Material和UI-Router开发移动Web应用程序.我正在遵循UI/UX部分的Google Material Design规范.

我想动画状态改变'Angular方式',特别是这个'Parent to child'动画

我不知道如何实现这种"提升和扩展"动画.

谢谢你的帮助 !

使用CSS3,有没有办法在DETAILS/ SUMMARY揭示时添加一个漂亮的淡入和从左滑动的过渡效果？

有关此新标记的演示,请参阅此演示:

https://jsfiddle.net/43m61yt0/1/

这是它的HTML:

<details>
  <summary>Copyright 1999-2014.</summary>
  <section>
    <p> - by Refsnes Data. All Rights Reserved.</p>
    <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
  </section>
</details>

在我的情况下,在summary标记之后,我将所有其他内容放在自己的section标记中,以便我可以设置样式,因为summary:after选择器似乎不起作用.我尝试在section和details标签的高度上使用CSS3过渡,但它没有帮助.这是我试过的:

<style type="text/css">
DETAILS
{
 transition:height 3s ease-in;
}
</style>

我做了一个在行星之间移动的简单火箭.我希望火箭旋转到地球上,然后转换它/改变它的位置到点击的行星.

我设法知道我想要去哪个方向但是我无法弄清楚如何首先进行旋转并且在开始过渡以移动火箭之后.

一旦用户点击这样一个行星,我就应用js的transorm:

rocket.css({"top": POSITIONS[element].top, "left": POSITIONS[element].left});
setRocketOrientation(destination);

Codepen

const POSITIONS = {
  A: {top: "25%", left: "27%"},
  B: {top: "25%", left: "77%"},
  C: {top: "60%", left: "27%"},
  D: {top: "60%", left: "77%"}
}
var origin = "default";
var rocket = $("#rocket");

$(".planet").on("click", function(e) {
  let element =  $(this)[0].id;

  rocket.css({"top": POSITIONS[element].top, "left": POSITIONS[element].left});
  setRocketOrientation(element);
});

function setRocketOrientation (destination) {
  let orientation = null;
  switch(destination) {
    case "A":
      if(origin === "default" || origin === "D")
        orientation = "-45deg"
      else if(origin === …

在我的代码中,我根据当前鼠标的X和Y位置更改了一些元素的位置.我添加了一个CSS transition: all 5000ms;来使动画更流畅.

它看起来很棒并且在谷歌浏览器(版本63)中按预期工作,但在Internet Explorer和Firefox中,动画看起来很滞/不稳定

这是我的代码:

// $('.shape').css("transition", "all 7000ms");
$(document).mousemove(function(e){
    let mX = e.clientX;
    let mY = e.clientY;
    $('.shape-1').css("transform", "translate("+mX/10+"px, "+mY/10+"px)");
});

有谁知道为什么浏览器对css转换的处理方式不同？

没有CSS过渡的 JSFiddle :https://jsfiddle.net/2rrcp27L/9/

JSFiddle 与CSS过渡:https://jsfiddle.net/2rrcp27L/6/