jQuery随衰减翻转

我正在尝试创建一个翻转动画，该动画将淡出，直到翻转到达翻转动画的中间，并从该点淡入，直到翻转动画结束。 这是我到目前为止所得到的，但不是我想要实现的：

HTML:

JS:

---

有什么建议吗？

您可以使用“transition timing function”以相同的速度进行CSS转换，并在jQuery中使用fadeTo（）而不是fadeOut（）和fadeIn（）

CSS:

JavaScript:

function flip() {    
  $('.card').toggleClass('flipped').fadeTo(1500,0,function(){ $(this).fadeTo(1500,1);});
}

代码段：

函数翻转（）{
$（'.card'）.toggleClass（'fliped'）.fadeTo（1500,0，function（）{$（this.fadeTo（1500,1）；}）；
}

.container{
宽度：200px；
高度：260px；
位置：相对位置；
边框：1px实心#ccc；
-webkit透视图：800px；
-moz透视图：800px；
-透视图：800px；
透视图：800px；
}
.卡片{
宽度：100%；
身高：100%；
位置：绝对位置；
-webkit转换：-webkit转换3s；
-moz变换：moz变换3s；
-o-转换：-o-转换3s；
转变：转变3s；
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
-o变换样式：preserve-3d；
变换样式：保留-3d；
-webkit转换来源：50%50%；
-webkit过渡计时功能：线性；/*Safari和Chrome*/
过渡时间函数：线性；
}
.信用卡部{
显示：块；
身高：100%；
宽度：100%；
线高：260px；
颜色：白色；
文本对齐：居中；
字体大小：粗体；
字体大小：140px；
位置：绝对位置；
-webkit背面可见性：隐藏；
-moz背面可见性：隐藏；
-o-背面-可见性：隐藏；
背面可见性：隐藏；
}
.名片.正面{
背景：红色；
}
.卡，回来{
背景：蓝色；
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
}
.翻了{
-webkit变换：旋转（180度）；
-莫兹变换：旋转（180度）；
-o变换：旋转（180度）；
变换：旋转（180度）；
}

翻转卡片
1.
2.

默认情况下，设置为

ease

。如果希望它是

线性的

，可以将以下内容添加到css中：

transition-timing-function: linear;

如果要使其保持在

轻松状态

，则需要使用。它到达了中间点，大约占整个过程的25%。您可以相应地修改您的时间：

$('.card').toggleClass('flipped').fadeOut(750).fadeIn(2250);

---

您是否尝试过摆弄

fadeIn

/

fadeOut

时间：

$（'.card'）。切换类（'fliped'）。fadeOut（750）。fadeIn（750）？你可能想尝试不同的方法times@CyberneticTwerkGuruOrc试过了，没用，但下面的答案可以。谢谢tho:）太好了，正是我想要的。一种iPhone拨号器翻转动画；）我对你的答案投了更高的票，因为这是一个很好的解释，尽管如果你看你的小提琴，你会发现结果，出于某种原因，仍然不是我想要达到的结果（翻转的一面只是在没有翻转的情况下逐渐消失）。。。。
.card {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transition: -webkit-transform 3s;
  -moz-transition: -moz-transform 3s;
  -o-transition: -o-transform 3s;
  transition: transform 3s;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  -webkit-transition-timing-function: linear; /* Safari and Chrome */
  transition-timing-function: linear;
}

function flip() {    
  $('.card').toggleClass('flipped').fadeTo(1500,0,function(){ $(this).fadeTo(1500,1);});
}

transition-timing-function: linear;

$('.card').toggleClass('flipped').fadeOut(750).fadeIn(2250);