css动画问题和仅在野生动物园中进行转换的问题

编程问答 2022-06-12

问题描述

为艺术家制作一个网页，当某些元素悬停时，它们在某些元素上具有旋转和缩放动画。问题在于，在手机上，这些动画可以在每个浏览器中执行，但在Safari浏览器中有效。 （我知道人们必须点击才能触发动画，因为您无法在手机上悬停，问题是在chrome和firefox中，点击使元素旋转或缩放，而在safari中则什么也没有发生。我一直在阅读safari和webkit文档并尝试在所有地方使用著名的-webkit-前缀，但这只是行不通。

这是网站：http://fimabres.epizy.com/

这是第一个构图（前3个图像滑块）动画

&:hover{
       flex-grow: 3.5;

       @include respond(phone){
           flex-grow: 30;
       }
   }

这是旋转的纸牌（显示目标）动画 .card {

    perspective: 150rem;
    -moz-perspective: 150rem;
    position: relative;
    height: 51rem;
    flex: 0 0 48%;

    @include respond(phone){
        flex: 0 0 95%;
    }

    &__side{
        height: 51rem;
        transition: all .8s;
        position: absolute;
        top:0;
        left: 0;
        width: 100%;
        backface-visibility: hidden;
        border-radius: 3px;
        box-shadow: 0 1.5rem 4rem rgba(black,.15);
        overflow: hidden;

        &--front{
            background-color: rgba(white,.8);
        }
        &--back{
            transform: rotateY(180deg);
            border: 1px solid white;
           background-color: #091442;
            background-position: center;
            background-size: cover;      

          
   
        }
    }
    &:hover &__side--front{
        transform: rotateY(-180deg);
    }
    &:hover &__side--back{
        transform: rotateY(0);
    }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

animationanimationsafarisasswebkit