调整浏览器大小会影响动画 - CSS

Question

我有以下 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>


<link rel= "stylesheet" href = "style.css"></a>
<body>

    <div class = "wrapper">
        '<img src="compsci_coffee_blend_1.png" height = 150px width = 150px class = "coffee">

    </div>


</body>
</html>

其中 style.css 是：

    position: relative;
}

.coffee{
    animation-name: slide; /*tells image which set of keyframes to take one */
    animation-duration: 2s; /*how long animation should take */
}


/* define keyframe animation */
@keyframes slide{
    from{transform: translateX(0);} /*start at 0 */
    to {transform:translateX(900px);} 
}

效果很好，图像在屏幕上移动。但是，当我将浏览器的 window 变小时，图像仍然在全屏浏览器的长度方向上移动，所以它被截断了，你看不到它。我怎样才能解决这个问题？（例如，我怎样才能使动画缩放到浏览器大小？）

谢谢！

Answer 1

这样试试。我在这里添加了动画宽度 100 window width

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>


<link rel= "stylesheet" href = "style.css"></a>
<body>

    <div class = "wrapper">
        '<img src="compsci_coffee_blend_1.png" height = 150px width = 150px class = "coffee">

    </div>


</body>
</html>

css

  .wrapper{  
    position: relative;
}

.coffee{
    animation-name: slide; /*tells image which set of keyframes to take one */
    animation-duration: 2s; /*how long animation should take */
}


/* define keyframe animation */
@keyframes slide{
    from{transform: translateX(0);} /*start at 0 */
    to {transform: translateX(calc(100vw - 160px));} 
}

Answer 2

只需使用百分比 %:

@keyframes slide{
from{transform: translateX(0);} /*start at 0 */
to {transform:translateX(80%);}

调整浏览器大小会影响动画 - CSS

Resizing browser impacts animation - CSS

html

css

browser

animation

resize