Html Css将元素从左向右移动动画_Html_Css

Html Css将元素从左向右移动动画

html css

Html Css将元素从左向右移动动画,html,css,Html,Css,当我改变左、右变量时，有一个元素需要从左向右和从右向左移动下面是我正在研究的一个JSFIDLE示例。它从左向右和从右向左移动，但没有动画我做错了什么 CSS: <body> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> <div></div> <p>Hov

当我改变左、右变量时，有一个元素需要从左向右和从右向左移动

下面是我正在研究的一个JSFIDLE示例。它从左向右和从右向左移动，但没有动画

我做错了什么

CSS:

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>

HTML:

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>


注意：此示例在Internet Explorer 9和早期版本中不起作用
将鼠标悬停在上面的div元素上，以查看过渡效果

这是因为您没有为未悬停状态赋予

right

属性

right

未设置，因此它试图从零变为

0px

。显然，因为它没有什么可去的，它只是“扭曲”了

如果您将未覆盖状态设置为

正确：90%，它将根据您的喜好进行转换
作为旁注，如果您仍然希望它位于页面的最左侧，可以使用calc
css函数
例如：
right: calc(100% - 100px)
                     ^ width of div

您不必使用left

此外，您不能使用左
或右
自动
进行转换，并将产生相同的“扭曲”效果

div{
宽度：100px；
高度：100px；
背景：红色；
过渡：2s；
-webkit转换：2s；
-moz跃迁：2s；
位置：绝对位置；
右：计算（100%-100px）；
}
div:悬停{
右：0；
}

注意：此示例在Internet Explorer 9和早期版本中不起作用。

将鼠标悬停在红方块上以查看过渡效果。
试试这个

div
{
宽度：100px；
高度：100px；
背景：红色；
过渡：所有1都易于输入输出；
-webkit转换：所有1都易于输入输出；
-moz转换：所有1都易于输入输出；
-o型转换：所有1均易于输入输出；
-ms转换：所有1都易于输入输出；
位置：绝对位置；
}
div:悬停
{
变换：平移（3em，0）；
-webkit转换：翻译（3em，0）；
-moz变换：平移（3em，0）；
-o变换：平移（3em，0）；
-ms变换：平移（3em，0）；
}
注意：此示例在Internet Explorer 9和早期版本中不起作用
将鼠标悬停在上面的div元素上，以查看转换效果。
您应该尝试使用css3动画进行转换。检查以下代码：
<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: myfirst 5s infinite; /* Chrome, Safari, Opera */
    -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
    animation: myfirst 5s infinite;
    animation-direction: alternate;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background: red; left: 0px; top: 0px;}
    25%  {background: yellow; left: 200px; top: 0px;}
    50%  {background: blue; left: 200px; top: 200px;}
    75%  {background: green; left: 0px; top: 200px;}
    100% {background: red; left: 0px; top: 0px;}
}

@keyframes myfirst {
    0%   {background: red; left: 0px; top: 0px;}
    25%  {background: yellow; left: 200px; top: 0px;}
    50%  {background: blue; left: 200px; top: 200px;}
    75%  {background: green; left: 0px; top: 200px;}
    100% {background: red; left: 0px; top: 0px;}
}
</style>
</head>
<body>

<p><strong>Note:</strong> The animation-direction property is not supported in Internet Explorer 9 and earlier versions.</p>
<div></div>

</body>
</html>


div{
宽度：100px；
高度：100px；
背景：红色；
位置：相对位置；
-webkit动画：myfirst 5s infinite；/*Chrome、Safari、Opera*/
-webkit动画方向：alternate；/*Chrome、Safari、Opera*/
动画：我的第一个5s无限；
动画方向：交替；
}
/*铬、狩猎、歌剧*/
@-webkit为myfirst设置关键帧{
0%{背景：红色；左侧：0px；顶部：0px；}
25%{背景：黄色；左侧：200px；顶部：0px；}
50%{背景：蓝色；左侧：200px；顶部：200px；}
75%{背景：绿色；左侧：0px；顶部：200px；}
100%{背景：红色；左侧：0px；顶部：0px；}
}
@关键帧myfirst{
0%{背景：红色；左侧：0px；顶部：0px；}
25%{背景：黄色；左侧：200px；顶部：0px；}
50%{背景：蓝色；左侧：200px；顶部：200px；}
75%{背景：绿色；左侧：0px；顶部：200px；}
100%{背景：红色；左侧：0px；顶部：0px；}
}
注意：Internet Explorer 9和早期版本不支持动画方向属性

其中“div”是动画对象
我希望你觉得这有用
谢谢。
像这样吗？检查！查看此演示权限：计算（100%-100px）；嗨，检查一下“左和右变量”你是说“左和右属性”吗？您是从哪里想到Safari需要供应商前缀的？为什么要使用过时的供应商前缀？使用transform
而不是left
和right
有什么好处？在这种情况下，动画比转场有什么好处，除了更详细？OP没有使用动画，他使用的是过渡。如果两个块相同，你能把它们放在一起吗？像@-webkit keyframes myfirst、@keyframes myfirst{…}