1
最近私はdivのトランジションアニメーションについて同様の質問をしました。 （See this post）CSS3 Divアニメーション相対的な間隔
以下のコードスニペットは私のソリューションを示しています。
ただし、アニメーションは、幅がピクセルで指定されていて、パーセントではなく、である場合にのみ機能します。
誰かがこれを回避する方法を知っていますか？
EDIT（私の問題を明確にする詳細情報）：ウェブサイトのこのセクションで
は、私はいつも同じで、ユーザーの入力に「スワイプ」することができ、コンテンツの3ページをとどまるべき見出しを持っています。
したがって、ページの左余白の範囲は-100％〜+ 100％の範囲になります。
ユーザーがページ2（つまり画像を表示する）からページ3（つまり、画像に関連するテキスト）に切り替えることができるようにスワイプアニメーションが必要です。
ブラウザウィンドウのサイズが異なるため、幅がパーセンテージである必要があります。悲しいことに...
$(document).ready(function() {
$(".next").click(function() {
var current = $(".container").css("left");
if (current == "-200px") {
current = "-400px";
} else if (current == "0px") {
current = "-200px";
}
$(".container").css("left", current);
});
$(".prev").click(function() {
var current = $(".container").css("left");
if (current == "-200px") {
current = "0px";
} else if (current == "-400px") {
current = "-200px";
}
$(".container").css("left", current);
});
});.row {
border: 1px solid black;
height: 200px;
margin: 0;
width: 200px;
padding: 0;
display: block;
position: relative;
overflow: hidden;
}
.container {
height: 200px;
margin: 0;
width: 600px;
padding: 0;
display: block;
position: absolute;
left: -200px;
top: 0;
-webkit-transition: left 0.5s ease-in-out;
-moz-transition: left 0.5s ease-in-out;
transition: left 0.5s ease-in-out;
}
.ins {
width: 200px;
float: left;
height: 200px;
margin: 0;
padding: 0;
background-color: red;
}
.div1 {
background-color: red;
}
.div2 {
background-color: green;
}
.div3 {
background-color: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TITLE</title>
<meta name="Title" content="Main">
</head>
<body>
<div class="row">
<div class="container">
<div class="ins div1">div-1</div>
<div class="ins div2">div-2</div>
<div class="ins div3">div-3</div>
</div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>
</body>
</html>
「px」単位の代わりに使用するパーセント値は何ですか？ – guest271314
100％（フルブラウザのウィンドウをいっぱいにしたい）、幅は80％前後です。 – Narusan