标签: css-transitions

我正在使用这里描述的进度条:

http://css-tricks.com/html5-progress-element/

使用<progress>元素并使用伪类-webkit-progress-bar和样式设置它 -webkit-progress-value.

所以现在我想要动画progress-value,无论何时更新.

在我的理论中,这应该通过转换其CSS宽度属性来完成,如下所示:

progress::-webkit-progress-value {
    transition: 5s width;
}

但由于某种原因,这似乎不起作用.

我试图在父元素悬停时暂停显示子元素.

HTML:

<span>
    <div>This Is The Child</div>
    Some Text in the span
</span>

CSS:

span { 
    position: relative; 
}
span div { 
    display: none;
    width: 0px;
    opacity: 0;

    transition: width 5s;
    -webkit-transition: width 5s;

    transition: opacity 5s;
    -webkit-transition: opacity 5s;
}
span:hover div {
    display: inline-block;
    width: 150px;
    opacity: 1;
}?

截至目前,当跨度悬停时,div在显示之前没有延迟.我该如何修复它以便暂停？

在这里小提琴:http://jsfiddle.net/SReject/vmvdK/

一些注意事项:
我原本试图过渡显示器,但正如爱德华指出的那样,这是不可能的,并且有意义尝试了以上哪些,也不起作用

解决了

看起来"过渡到"样式中的任何"显示"属性都将阻止任何过渡动画的发生.解决这个问题.我将要显示的子项的宽度设置为0px并使其完全透明.然后在"过渡到"样式中,我设置了正确的宽度,并使div固定:

HTML:

<span>
    <div>This Is The Child</div>
    Some Text in the span
</span>

CSS:

span { 
    position: relative; 
}
span div …

我通过CSS将硬币沿Y轴旋转90度.有没有办法让我可以在旋转后显示硬币的厚度,我认为在硬币沿Y轴旋转后我可以缩放,但这似乎不起作用.如果可能的话,请建议一些方法来做同样的事情.link_on_js也是如此.请使用webkit浏览器打开链接.

CSS

.coin {
    display: block;
    background: url("url-to-image-of-coin.jpg");
    background-size: 100% 100%;
    width: 100px;
    height: 100px;
    margin: auto;
    border-radius: 100%;
    transition: all 500ms linear;
}

.flip {
    transform: rotateY(180deg);
}

HTML

<div class="coin"></div>

jQuery的

$('.coin').click(function() {
    $(this).toggleClass('flip');
});

小提琴

http://jsfiddle.net/7EtLu/22/

我已经加载了jQuery传输,我确保在加载jQuery之后我做了,但我仍然得到这个错误:

我查看了Chrome中的资源面板,并在jQuery之后加载了jQuery传输.它也正确加载,并显示没有问题.

我还在控制台中进行了测试,测试了网站上的示例.他们都返回同样的错误.

这是我的代码:

  $("#current-employers a.industry-company-link").click(function (e)
    {
        e.preventDefault();
        var url = $(this).attr("href");
        var company_container = $("#current-company-profile");
        company_container.load(url);
        company_container.transition({
            y: ($(this).offset().top - company_container.offset().top)
        });
        console.log("container offset: " + company_container.offset().top + "\nURL offset: " + $(this).offset().top);
    });

我带来的脚本:

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js"></script>

        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.1.3/jquery.transit.min.js"></script>

谢谢你的帮助.

当您将-webkit-filter和-webkit-transition应用于Image并在悬停时更改过滤器时,图像过渡效果很好,但随后图像变得非常模糊.

注意:这只发生在Retina-Displays上 - 对于'普通'ppi 显示没有任何问题,但是模糊不清,例如带有Retina显示屏的新MacBook Pro.

我的CSS(没有供应商前缀):

img {filter:grayscale(1);filter:saturate(0%);transition:2s ease;width:200px;height:200px}
img:hover {filter:grayscale(0)}?

注意:要查看效果/错误,我已将转换持续时间设置为2秒

看看我的演示:http://jsfiddle.net/dya2t/7/

我怎样才能解决这个问题？

编辑:如果我设置:悬停状态过滤:没有它的尖锐!:-)但是当然转换不再起作用了: - /一旦图像上有过滤器(即使值为0或0%),图像在视网膜显示器上变得模糊(有或没有过渡......它一直都很模糊.我猜这是一个Filter-Bug.

这是WebKit中的已知错误https://bugs.webkit.org/show_bug.cgi?id=93471

我正在制作一个带有HTML和CSS3的幻灯片菜单 - 尤其是过渡.

我想知道什么是最佳实践/最佳性能水平滑动相对定位的div.当我点击一个按钮时,它会向我的div添加一个类.哪个班级更好？(注意我可以稍后添加所有浏览器前缀,此网站仅针对现代浏览器).

//option 1
.animate{
    -webkit-transition:all ease 0.3s;
    -webkit-transform:translateZ(200px);
}

//option 2
.animate{
    -webkit-transition:all ease 0.3s;
    left:200px;
}

谢谢

我正在使用CSS变换/动画与font-face(twitter bootstrap/font-awesome)来生成一个类似spinner的gif图标.

问题是图标在360度左右时会摇摆不定.看到这个JSFiddle,看看我的意思.有谁知道怎么让它不摇晃？或者至少让它旋转得更顺一些？

这是以下代码:

CSS:

i.icon-repeat {
  -webkit-animation: Rotate 500ms infinite linear;
  -moz-animation: Rotate 500ms infinite linear;
  -ms-animation: Rotate 500ms infinite linear;
  -o-animation: Rotate 500ms infinite linear;
  animation: Rotate 500ms infinite linear;
}
@-o-keyframes Rotate {
  from {-o-transform:rotate(0deg);}
  to {-o-transform:rotate(360deg);}
}
@-moz-keyframes Rotate {
 from {-moz-transform:rotate(0deg);}
 to {-moz-transform:rotate(360deg);}
}
@-ms-keyframes Rotate {
  from {-ms-transform:rotate(0deg);}
  to {-ms-transform:rotate(360deg);}
}
@-webkit-keyframes Rotate {
  from {-webkit-transform:rotate(0deg);}
  to {-webkit-transform:rotate(360deg);}
}
@keyframes Rotate {
  from { transform:rotate(0deg);}
  to { transform:rotate(360deg);} …

我有一个具有无限css3动画的元素,当元素悬停时,它会被更改为另一个无限动画.一切都还可以,但有时动画变化过于有弹性,有没有办法让动画在动画之间平滑(可能在动画之间将元素带到初始状态)在mouseenter和mouseleave上？两个动画的开始和结束状态是相同的.

@keyframes first-animation {
0% { transform: scale3d(1,1,0);}
50% { transform: scale3d(0.8,0.8,0); }
100% { transform: scale3d(1,1,0); }
};

@keyframes second-animation {
0% { transform: scale3d(1,1,0); }
70% { transform: scale3d(0.7,0.7,0); }
80% { transform: scale3d(0.9,0.9,0); }
100% { transform: scale3d(1,1,0);  }
};

div{
animation: first-animation 1.7s ease-in-out infinite;
}

div:hover, div:focus{
animation: second-animation 1.1s ease-in-out infinite;
}

这不是重复的.虽然我基本上在寻找与其他帖子相同的结果,但我想以不同的方式去做.他们正在使用背景图片,我想用一个<span>.

我正在尝试创建一个文本框,以便当用户输入文本框时,右侧会显示"X".但是,当盒子里没有文字时,我不希望"X"出现,就像现在一样.

我尝试将"X"设为白色,并在滑动时将其转换为颜色,但是当你将mousedown拖到它上面时仍然可以选择.

我想我需要将它放在文本框中(不知何故),然后将其滑动到右侧并使用隐藏它overflow: hidden.我也尝试过这样做,但我无法随心所欲.

http://jsfiddle.net/qgy8Ly5L/16/

本<span>应该是"落后"的白色背景时,它没有显示.中期过渡应如下所示:

这可能在CSS中,如果是这样,我该怎么办？

似乎有很多关于同一问题的问题,但似乎找不到满意的答案......我有:

1 container (flex) (green)
   2 columns (block) -> left: red, right: orange
      in the left column, I have two divs (green) who follow each other 'menu1''menu2'

这两个菜单本身都包含在div(黑色)中,因此当我旋转它时,两个菜单是垂直的而不是水平的(旋转90度)

目标是让顶部包装器/容器(绿色)占据垂直黑色包装的高度,并使左列包装器不大于旋转的黑色包装器的"宽度".

我得到的内容在以下示例中说明:

https://jsfiddle.net/pg373473/

<div id='container' style='display: flex; border: 3px solid green; flex-direction=row'>
  <div id='leftbox' style='position: relative; display: block; border: 3px solid red'>
    <div id='textwrapper' style='transform-origin: bottom left; transform: translateY(-100%) rotate(90deg); border: 2px solid black;'>
      <div style='border: 3px solid green; display: inline-block'>menu 1</div>
      <div style='border: 3px solid green; display: inline-block'>menu 2</div>
    </div>
  </div> …