即使以下代码片段看起来很短,我也会在几天内挣扎(对我感到羞耻!)找到一种方法来缩放仅使用CSS3 点击的点transform.它现在有效:

    var current = {x: 0, y: 0, zoom: 1}, c = document.getElementById('container');
    window.onclick = function(e) {
      wx = current.x + e.clientX / current.zoom;
      wy = current.y + e.clientY / current.zoom;
      var coef = e.ctrlKey ? 0.5 : 2;
      current.zoom *= coef;    
      current.x = wx - e.clientX / current.zoom; 
      current.y = wy - e.clientY / current.zoom; 
      c.style.transform = 'scale(' + current.zoom +') translate(' + (-current.x) + 'px,' + (-current.y) + 'px)';
    };

    html, body { …

我想知道是否有可能只使用CSS3功能在div中从左到右进行渐变移动？没有必要支持所有浏览器,我只是想试验.例如,蓝色进度条顶部的闪亮效果.一个例子是赞赏的.

我花了大约4个小时进行一次性能可接受的简单过渡:

首先我尝试了这段代码:

left: 2000px;
-webkit-transition: left 1s linear;
-moz-transition: left 1s linear;
-ms-transition: left 1s linear;

结果在Chrome v21.0.1180.89和FireFox v15.0.1上很糟糕,但在IE10上很棒.我捕获了CPU使用率和GPU使用率图,发现chrome不使用GPU作为基本css属性, 现代浏览器的解决方案是什么？

假设我有一个<div>我希望从小尺寸扩展到更大尺寸(见这个).

默认情况下,a的宽度和高度CSS3过渡<div>将从左上角开始,然后向右下方进行.但是,我希望<div>从右上角扩展到左下角.

这是我的问题:有什么方法可以让我<div>从右上角到左下角进行宽度和高度过渡？

这是一张图片来澄清我的问题.基本上,我希望我<div>像右边的框一样展开,而不是像左边的框所示的默认方式.

这是另一张图片:

如何在CSS3中从左到右创建下划线动画hover？

我试图为Twitter Bootstrap按钮创建微调器.旋转器应指示正在进行的一些工作(即ajax请求).

这是一个小例子:http: //jsfiddle.net/AndrewDryga/zcX4h/1/

HTML(完整的jsfiddle):

Unknown element (no animation here!):
<p>
  <button class="btn-success has-spinner">
    <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
    Foo
  </button>
</p>

Works when width is defined:
<p>
  <a class="btn btn-success has-spinner">
    <span class="spinner"><i class="icon-spin icon-refresh"></i></span>
    Foo
  </a>
</p>

CSS:

.spinner {
  display: inline-block;
  opacity: 0;
  width: 0;

  -webkit-transition: opacity 0.25s, width 0.25s;
  -moz-transition: opacity 0.25s, width 0.25s;
  -o-transition: opacity 0.25s, width 0.25s;
  transition: opacity 0.25s, width 0.25s;
}

/* ... */

.has-spinner.active .spinner {
  opacity: 1;
  width: auto; …

我想使用多个类来选择性地添加转换.而不是堆叠,前一个被覆盖.

.container { transition: margin .2s; }
.container.t-padding { transition: padding .2s; }

问题:属性被覆盖而不是堆叠

http://jsfiddle.net/yz2J8/2/(问题)

我的临时解决方案:将先前的转换添加到规则中

.container { transition: margin .2s; }
.container.t-padding { transition: padding .2s, margin .2s; }

http://jsfiddle.net/ZfQcp/6/(我的临时解决方案)

什么是更好的解决方案？

如何避免创建大量规则来组合这些规则？

我的情况只发生在IE11上.Chrome,Firefox,Safari(平板电脑和手机)都按预期工作.我已经创建了一个面板(DIV)的过渡,它从侧面滑入/滑出.在页面加载时,它不应该"动画",而是捕捉到适当的位置.但是在IE11页面加载时,只有当媒体查询涉及与选择器的最高CSS特异性级别相匹配的媒体查询时,才会"播放"转换.奇怪的是媒体查询甚至不合适(在我的测试中加载页面时不应该应用).

以下简单代码重复了我的问题:

CSS

.standard {
  transition: all 1s ease-in-out;
  transform: rotate(45deg);
  width:50px;  height:50px;  border:1px solid black;  background-color:green;   margin:3em;
}

button + .standard {
  transform: rotate(30deg);
}

button.on + .standard {
  transform:rotate(0deg);
}

/* REMOVE THE FOLLOWING COMMENTS to see issue on page load using IE11 - make sure window is larger than 800 pixels */
/*
@media only screen and (max-width:800px) {
  button.on + .standard {
    background-color:red;
    transform:rotate(270deg);
  }
}
*/

HTML

<button class="on" onclick="this.classList.toggle('on');">Rotate Test</button>
<div class="standard">&nbsp;</div> …

我希望有人告诉我,制作网页背景颜色(整个页面的背景颜色)的代码是什么,每30秒更改一次(淡入淡出过渡)到给定的颜色种类.这很简单吗？我猜css会让它变得更容易吗？

我在网上搜索过,我发现渐变不是我想要的.先感谢您.我搜索了codepen和jsfiffle的例子,但没有人有这么简单:/

示例:在浏览我的页面时,我希望背景颜色从蓝色变为绿色,然后变为橙色,再次变为蓝色,依此类推...... :)

看这个动画：

• 金色 div 有一个动画，其中自定义属性被动画化
  （@keyframes roll-o-1animates --o）。
  这一步动画。
• 银色 div 有一个动画，其中一个普通属性被动画化
  （@keyframes roll-o-2animates left）。
  这会连续动画。

为什么金色 div 动画不流畅？
是否有任何解决方法也使用变量？

#one {
  width: 50px;
  height: 50px;
  background-color: gold;
  --o: 0;
  animation: roll-o-1 2s infinite alternate ease-in-out both;
  position: relative;
  left: calc(var(--o) * 1px);
}

@keyframes roll-o-1 {
  0% {
    --o: 0;
  }
  50% {
    --o: 50;
  }
  100% {
    --o: 100;
  }
}

#two {
  width: 50px;
  height: 50px;
  background-color: silver;
  --o: 0; …