css3動畫邊距自動不起作用
[英]css3 animation margin auto not working
問題描述
我想將“letsgo”div 從左邊距 100% 移動到自動邊距動畫。 即它停在左邊距和右邊距相等的點。 但我想不通。 請幫我。
我的代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Do IT...</title>
<meta charset="UTF-8">
<style>
#letsgo{
height: 600px;
width: 500px;
border: 2px solid #64BBF0;
border-radius: 2px;
margin: auto;
position: relative;
animation-fill-mode: forwards;
box-shadow: 5px 5px 2px #64BBF0;
animation-name: miku;
animation-duration: 1s;
}
@keyframes miku{
0%{
margin-left: 100%;
}
100%{
margin: auto;
}
}
#doit{
height: 100px;
width: 100px;
border-radius: 50%;
background: yellow;
position: absolute;
top: 250px;
left: 200px;
}
.child{
height: 25px;
width:25px;
border-radius: 50%;
background: red;
position: absolute;
top: 287.5px;
left:237.5px;
}
*{
transition: all 2s ease-out;
}
#letsgo:hover .child{
box-shadow: -237.5px -287.5px red,
-237.5px 287.5px red,
237.5px -287.5px red,
237.5px 287.5px red,
237.5px 0 red,
-237.5px 0 red,
0 287.5px red,
0 -287.5px red;
}
}
</style>
</head>
<body>
<div id="letsgo">
<div id="doit"></div>
<div class="child"></div>
</div>
</body>
</html>
3 個解決方案
解決方案1
8 2017-04-15 20:53:39
我知道這是一篇舊帖子，但如果有人正在尋找沒有絕對定位的另一種解決方案，您可以使用邊距和翻譯。 像這樣的東西：
0% {
margin-left: 100%;
transform: translateX(0%);
}
100% {
margin-left: 50%;
transform: translateX(-50%);
}
解決方案2
4 2014-02-25 21:29:13
正如 Samih 所說，您不能為 2 個非數值之間的屬性設置動畫。
一種可行的方法是使用 left 屬性（因此您需要絕對定位）和邊距使 div 居中：
#letsgo{
height: 600px;
width: 500px;
border: 2px solid #64BBF0;
border-radius: 2px;
margin: auto;
position: absolute;
box-shadow: 5px 5px 2px #64BBF0;
-webkit-animation-fill-mode: forwards;
-webkit-animation-name: miku;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes miku{
0% { margin-left: 0px;
left: 100%; }
100% { margin-left: -250px;
left: 50%; }
}
解決方案3
0 2020-09-14 12:10:46
我知道這只是個老問題，但是，您也可以使用 calc()，因為您知道居中元素的寬度。
#letsgo {
margin-left:100%;
transition:all 1s;
}
#letsgo.animated {
margin-left:calc((100vw - 500px)/2);
}
margin：CSS3中的auto屬性
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.