Css 如何在“悬停关闭”时反转关键帧？_Css_Css Animations_Keyframe

Css 如何在“悬停关闭”时反转关键帧？

css

Css 如何在“悬停关闭”时反转关键帧？,css,css-animations,keyframe,Css,Css Animations,Keyframe,我正在使用关键帧制作卡片翻转动画。除了事实上，我需要动画的起源是在中间，卡翻转罚款悬停。但是，我需要在悬停关闭时“松开”。现在它只是重置而不是设置动画 .oisqa-widget .flip-container:hover .flipper { -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-tr

我正在使用关键帧制作卡片翻转动画。除了事实上，我需要动画的起源是在中间，卡翻转罚款悬停。但是，我需要在悬停关闭时“松开”。现在它只是重置而不是设置动画

.oisqa-widget .flip-container:hover .flipper {
      -webkit-transform-origin: 50% 50%;
      -moz-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
      -o-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -webkit-animation: flipcard 1s 0s 1 normal forwards;
      -moz-animation: flipcard 1s 0s 1 normal forwards;
      animation: flipcard 1s 0s 1 normal forwards; }

我已经创建了一个用于显示发生了什么的

不要对悬停效果使用关键帧动画刚刚删除了@keyframe css规则，并将其添加到悬停时的容器中，这样它将自动处理悬停效果

这是密码
全屏

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
.oisqa小部件{
浮动：左；
宽度：100%；
}
.oisqa小部件.翻转容器{
高度：170px；
}
.oisqa小部件.flip容器：hover.flipper{
-webkit转换来源：50%50%；
-moz变换原点：50%50%；
-ms转换来源：50%50%；
-o-变换原点：50%50%；
变换原点：50%50%；
-webkit变换：缩放（2）旋转（180度）；
}
.oisqa小部件.翻转容器{
显示：块；
浮动：左；
保证金权利：2.12766%；
宽度：31.91489%；
-webkit透视图：1000；
-莫兹透视图：1000；
前景：1 000；
}
.oisqa小部件.翻转容器：最后一个子项{
右边距：0；
}
.oisqa小部件。翻转器{
位置：相对位置；
过渡：0.6s；
变换样式：保留-3d；
}
.oisqa控件。前面，
.oisqa控件。返回{
位置：绝对位置；
顶部：0px；
左：0px；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
高度：170px；
填充：20px；
文本对齐：居中；
宽度：100%；
}
.oisqa小部件。前面{
背景：白色；
边框：1px#c3c3实心；
边框顶部：5px#1c4295实心；
变换：旋转（0度）；
z指数：2；
}
.oisqa控件。返回{
背景：#1c4295；
边框：1px#c3c3实心；
边框顶部：5px#F4实心；
颜色：白色；
变换：旋转（180度）；
}
.oisqa小部件。背部结实{
颜色：白色；
}
.oisqa-strong{
颜色：#1c4295；
}


问题1
回答1
问题2
回答2
问题3
回答3

这看起来有点复杂，所以请容忍我

为了获得所需的效果，我使用了3个单独的动画，其中2个与您当前的flipcard动画相同，因此最终将使用flipcard、flipcard2和hideAnswer

要使flipcard动画在两个方向上都工作，您需要将flipcard2添加到初始状态

。flipper

，我知道这似乎很奇怪，但悬停状态和初始状态需要使用具有不同名称的动画，您不能使用同一动画，而只需翻转方向。因此：

.oisqa-widget .flipper {
    position: relative;
    /*transition: 0.6s; remove this */
    transform-style: preserve-3d;
    -webkit-animation: flipcard2 1s 0s 1 reverse forwards;
    -moz-animation: flipcard2 1s 0s 1 reverse forwards;
    animation: flipcard2 1s 0s 1 reverse forwards; 
    /*note that flipcard and flipcard2 are the same but here the direction is reversed*/
}

现在，只需这样做，您的动画将在两个方向上运行，但您的答案将在页面首次加载时显示

为了防止出现这种情况，在动画在初始状态下播放时，您需要在第一秒钟隐藏所有内容，因此第三个动画

hideAnswer

：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    animation: hideAnswer 1s;
}
@keyframes hideAnswer {
    0%{opacity: 0;}
    99%{opacity: 0;}
    100%{opacity:1;}
}

现在，将所有这些放在一起，您将得到：

*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
-webkit动画：hideanswer1s；
-o-动画：hideanswer1s；
-moz动画：hideanswer1s；
动画：hideAnswer 1s；
}
@-o-关键帧隐藏{
0% {
不透明度：0；
}
99% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-webkit关键帧隐藏器{
0% {
不透明度：0；
}
99% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-moz关键帧隐藏{
0% {
不透明度：0；
}
99% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@关键帧隐藏器{
0% {
不透明度：0；
}
99% {
不透明度：0；
}
100% {
不透明度：1；
}
}
@-webkit关键帧动画卡{
0% {
-webkit变换：缩放（1）旋转（0）；
}
50% {
-webkit变换：缩放（2）旋转（180度）；
}
100% {
-webkit变换：缩放（1）旋转（180度）；
}
}
@-moz关键帧动画卡{
0% {
-moz变换：缩放（1）旋转（0）；
}
50% {
-莫兹变换：缩放（2）旋转（180度）；
}
100% {
-莫兹变换：缩放（1）旋转（180度）；
}
}
@-o关键帧翻转卡{
0% {
-o变换：缩放（1）旋转（0）；
}
50% {
-o变换：缩放（2）旋转（180度）；
}
100% {
-o变换：缩放（1）旋转（180度）；
}
}
@关键帧动画卡{
0% {
变换：缩放（1）旋转（0）；
}
50% {
变换：缩放（2）旋转（180度）；
}
100% {
变换：缩放（1）旋转（180度）；
}
}
@-webkit关键帧flipcard2{
0% {
-webkit变换：缩放（1）旋转（0）；
}
50% {
-webkit变换：缩放（2）旋转（180度）；
}
100% {
-webkit变换：缩放（1）旋转（180度）；
}
}
@-moz关键帧flipcard2{
0% {
-moz变换：缩放（1）旋转（0）；
}
50% {
-莫兹变换：缩放（2）旋转（180度）；
}
100% {
-莫兹变换：缩放（1）旋转（180度）；
}
}
@-o关键帧flipcard2{
0% {
-o变换：缩放（1）旋转（0）；
}
50% {
-o变换：缩放（2）旋转（180度）；
}
100% {
-o变换：缩放（1）旋转（180度）；
}
}
@关键帧flipcard2{
0% {
变换：缩放（1）旋转（0）；
}
50% {
变换：缩放（2）旋转（180度）；
}
100% {
变换：缩放（1）旋转（180度）；
}
}
.oisqa小部件{
浮动：左；
宽度：100%；
}
o