小编evu*_*evu的帖子

我有一个 css 过渡，可以在悬停时移动元素，还有一个动画，可以在悬停时旋转元素。动画上有一个等于过渡持续时间的延迟，因此在过渡到正确位置后，动画就会开始。它工作得很好，但是，当我们将鼠标移开时，动画会停止，但不会向下过渡。

在我们鼠标移开并且动画结束后是否可以让它过渡回来？

您可以在此处查看示例：http ://codepen.io/jhealey5/pen/zvXBxM

简化的代码在这里：

    div {
        width: 200px;
        height: 200px;
        margin: 40px auto;
        background-color: #b00;
        position: relative;

        &:hover {
            span {
                transform: translateY(-60px);
                animation-name: rotate;
                animation-duration: 1s;
                animation-delay: .5s;
                animation-iteration-count: infinite;
                animation-direction: alternate;
            }
        }
    }

    span {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #fff;
        bottom: 10px;
        left: 0;
        right: 0;
        margin: auto;
        transition: .5s;
    }

    @keyframes rotate {
        from {
            transform: translateY(-60px) rotate(0);
        }
        to {
            transform: translateY(-60px) rotate(-90deg);
        }
    }

我正在尝试创建一个简单的 2-up 图像布局，因此每个图像在两列中均为页面宽度的 50%，但是“自动”或“*”宽度似乎不适用于图像。

有没有办法在不设置图像的明确宽度的情况下实现这一点？

或者如果没有，是否可以获取页面的宽度，以便我自己进行数学计算？

编辑：

我尝试过的代码的简化版本是：

var dd = {
content: [
    {
        columns: [
            {
                image: 'sampleImage.jpg',
                width: 'auto'
            },
            {
                image: 'sampleImage.jpg',
                width: '*'
            }
        ]
    }
]
}

使用这些自动宽度我就进入Uncaught Error: unsupported number: NaN了控制台。但是，如果我将它们更改为固定宽度，它们就可以正常工作。