标签: css-transitions

我想为我的html对象设置几个变换选项,但具有不同的持续时间和延迟.

如果我尝试使用这样的东西:

-webkit-transition: -webkit-transform, opacity;
-webkit-transform: rotate(180deg) scale(2); 
-webkit-transition-duration: 2000ms, 6000ms; 
-webkit-transition-delay: 0ms, 6000ms;

那么我将有不同的时间函数用于变换和不透明度,但我可以设置不同的旋转和缩放选项,例如旋转10秒和缩放20秒？

我使用的规则的组合来实现CSS3 transition的跨浏览器兼容的方式规则地:我使用transition,-webkit-transition,-moz-transition,和-o-transition.

-ms-transition任何版本的Internet Explorer 都有类似的属性吗？是否有旧版IE的专有过滤器,类似于IE 6-8中以下规则如何适用于不透明度？

/* IE 8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft. Alpha(Opacity=50)"; 
/* IE 5-7 */ 
filter: alpha(opacity=50);

什么是语法上干净的解决方案,在一个元素上逐个运行单个CSS3转换链？一个例子:

• 将左侧设置为10px,将不透明度设置为1到200ms
• 设置为30px到500ms
• 将左侧设置为50px,将不透明度设置为0到200ms

可以在没有JavaScript的情况下完成吗？如果没有,如何使用JavaScript干净地编码？

我有一个三次贝塞尔曲线,其中给出了第一个和最后一个点(即P0(0,0)和P3(1,1)).其他两点定义如下:cubic-bezier(0.25,0.1,0.25,1.0)(X1,Y1,X2,Y2,这些值也不得小于或大于0或1)
现在我会怎样必须做的是获得给定X的Y坐标,假设只有一个？(我知道在某些情况下可能存在多个值,但让我们把它们放在一边.我不是在这里做火箭科学,我只是希望能够每秒多次获得Y来进行转换)

我设法挖掘了这个:给定x立方贝塞尔曲线的y坐标,但我不明白xTarget代表什么.
哦,这也不是任何功课,我对有关互联网上的立方贝塞尔曲线没有可理解的事实感到有些恼火.

情况:

查看jsFiddle

在div我的内部有一个图像,后跟文本,其上有font-weight900.在我的本地托管环境中,我使用的是自定义字体,但对于上面的小提琴,我选择了"永远如此时尚"的Comic Sans来说明我的观点.在发生任何事情之前,我将整个div的不透明度设置为0.7.但是,在盘旋过程中div,我希望一切的不透明度达到完全不透明度.

问题:

我注意到仅在Webkit浏览器中(在Chrome上比在Safari上更明显),在悬停在div标签上时,文本的重量似乎会发生变化.实际上,文本的权重当然没有任何变化.但是,仔细阅读后,您会看到文本仅在悬停时显示为所需的重量,但不会处于非悬停状态.

我做的事情:

• 我已在所有最新版本的Chrome,Firefox和Safari中对此进行了测试.
• 我正在测试这款新MacBook Pro,在我的例子中,它是一个视网膜屏幕.然而,我旁边的同事测试了她的iMac(非视网膜显示器)上的小提琴只是为了发现这个问题仍然很明显.
• 也许我只是疯了,但我觉得这实际上可能是webkit浏览器选择渲染具有不同不透明度的元素.然后,这可能只是我试图避免承认我做错了什么.

当然我觉得我可以用Comic Sans来减轻情绪.这是一个屏幕截图,以帮助解释问题:

我遇到了一个问题,我正在使用滑动面板进行滑动.

请看下面的jsbin http://jsbin.com/uvejuj/1/

请注意,当我第一次立即转换时单击切换按钮.

但是,如果我再次单击该按钮关闭,则转换会在执行之前延迟转换的时间.

什么导致关闭延迟,我怎么能摆脱它？

谢谢

所以我在悬停时进行了这种转换,这使得边框位于悬停在元素底部.一切都很好,但是当鼠标离开元素时,边框就会消失,而我希望它再次"缩回".Codepen

HTML:

<div class="object">

<p>Object</p>

</div>

CSS:

* {
background-color: #222;
color: white;
font-family: sans-serif;
font-size: 30pt;
}

p {
 width: 200px;
height: 100%;
margin-top: 70px;
text-align: center;
transition: 0.2s border-bottom;
-webkit-transition: 0.2s border-bottom;
margin: auto;
margin-top: 50px;
}

p:hover {
  border-bottom: 5px solid white;
}

我该如何做到这一点,尽可能简单？谢谢; 3

我想使用ng-show和动画为无序列表中的某些对象创建一个滑块.当物体向一个方向滑动时,我的效果很好.

但是,当我希望用户能够向左或向右滑动对象时,使用ng-class更改类,动画不再有效.

左/右案例的html是:

<div class="slide-holder">
  <ul class="slide-list">
    <li class="slide-object" ng-show="directionElement == 0" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}">
      Hello There 1! How are you?</li>
    <li class="slide-object" ng-show="directionElement == 1" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}">
      Hello There 2! How are you?</li>
    <li class="slide-object" ng-show="directionElement == 2" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}">
      Hello There 3! How are you?</li>
    <li class="slide-object" ng-show="directionElement == 3" ng-class="{'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'}">
      Hello There 4! …

我想要一个我Call active animation的项目.我创建了一个,但对动画并不是100%满意.我在这里粘贴我的代码请帮我创建一个很好的调用活动动画.如果你们有任何其他动画建议,请开火.干杯.!

我想要的是表示用户正在与另一个人交谈的动画.

.rc_side_phone {
  display: inline-block;
  font-size: 34px;
  width: 38px;
  height: 40px;
  background: rgba(94, 178, 2, 0.56);
  color: #fff;
  line-height: 40px;
  border-radius: 7px;
  background: #4CAF50;
  margin-left: 11px;
  margin-top: 8px;
}

.rc_side_phone i {
  line-height: 45px;
  margin-left: 4px;
}

.rc_side_phone:after {
  position: absolute;
  content: '';
  border-right: 2px solid #ffffff;
  width: 10px;
  left: 34px;
  top: 28px;
  height: 12px;
  border-radius: 50%;
  z-index: 9;
  transform: rotate(-44deg);
  -webkit-transform: rotate(-44deg);
  animation: onCall 1s steps(5) infinite;
  -webkit-animation: onCall 1s steps(5) …

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

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

一旦用户点击这样一个行星,我就应用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 === …