JavaScriptでCCSを不連続速度で書き換えたい

JavaScriptで、CSSの値を不連続の速度で書き換えたいです。
具体的に言うと、HTML上のコンテンツが等加速していき、一定速度に達した後、等速で動き続け、一定時間後に当減速して最後は停止。一定時間が停止したら、また加速という動きを繰り返したいです。

###該当のソースコード

JavaScript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
5<script>
6var itt0 = 100;
7var mvv0 = 5;
8var itt2 = 1;
9
10//メインロード
11window.onload = function(){
12	elop()
13}
14
15var adj1 = 1;
16var itt2 = 1;
17
18function elop(){
19
20  if (adj1 ==1 ) {
21    itt2 ++;
22  } else {
23    itt2 --;
24  }
25
26  if ( itt2 >= itt0 ){
27     adj1 =0;
28  } 
29   
30  if ( itt2 <= 2 ){
31     adj1 =1;
32  }
33
34   gmov(mvv0)
35   setTimeout(elop, itt2);
36}
37
38var sW0,sW1;
39sW0 = -100;
40//DIVを移動させる処理
41function gmov(mvv1){
42    depi(sW0);
43    sW1 = window.innerWidth;
44	
45	execdocwrite();
46	
47	if(sW0 > sW1){
48  	  sW0 = -100;
49	} else {
50	  sW0 = sW0 + mvv1;
51	}
52	
53}
54
55//DIVの左マージンを書き換える
56function depi(smlv){
57  box = document.getElementById('test1'); 
58  var sml = smlv + 'px'
59  box.style.marginLeft = sml;
60}
61
62function execdocwrite() {
63    var target = document.getElementById("test1");
64    target.innerHTML = "<b>" + sW0 +":" + sW1 + "<b><br /><b>" + itt2 +"</b>";
65 
66}
67
68</script>
69<style type="text/css">
70#test1 {
71	height: 100px;
72	width: 100px;
73	background-color: #FBF2A5;
74
75}
76
77</style>
78</head>
79<body>
80<div id="test1"></div>
81
82</body>
83</html>

とりあえず書いてみたものですが、上記のScriptでは、インターバルを変数で与えて変化させる事で、一応、加減速は可能となりました。
ですが、動作がぎこちなく、また、途中一定時間停止させるという処理も思いつきませんでした。

jQueryを使用すると、比較的簡単に同様の効果を表現できるのですが、HTMLをアップロードすると、強制的に余計なスクリプトなどを挿入してくるサイトで、うまく動作しないため、車輪の再開発のようですが、同様のバナー移動スクリプトを書いてしまおうとしています。

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

アニメーション効果にキーフレームを使うことで実現できます。

HTML
1<body>
2  <div></div>
3</body>

CSS
1div {
2    width: 100px;
3    height: 100px;
4    background: red;
5    position: relative;
6    animation: mymove 5s infinite;
7}
8
9/* Standard syntax */
10@keyframes mymove {
11    0%   {top: 0px;}
12    25%  {top: 200px;}
13    75%  {top: 50px}
14    100% {top: 100px;}
15}

（出典：w3Schools.com / CSS3 @keyframes Rule）

ご参考になれば。

投稿2016/04/28 08:39

tkanda

総合スコア2425

ky_46

2016/05/09 09:09

せっかくご回答頂いたのに、お返事が遅くなってすみませんでした。金曜と今日、ようやく試してみる事ができました。 CSSでアニメーションが出来るのですね。お恥ずかしい限りです。 <!doctype html> <html> <head> <meta charset="shift_jis"> <title>無題ドキュメント</title> <style type="text/css"> div.test1 { animation-name: anime1; animation-duration: 5s; animation-timing-function: ease; animation-iteration-count: infinite; } div.test2 { animation-name: anime2; animation-duration: 5s; animation-timing-function: ease; animation-iteration-count: infinite; animation-delay: .5s; } @keyframes anime1 { 0% { width: 50px; height: 50px; margin-left : -50px; background-color: aqua; } 100% { width: 50px; height: 50px; margin-left : 500px; background-color: blue; } } @keyframes anime2 { 0% { width: 50px; height: 50px; margin-left : -50px; background-color: blue; } 100% { width: 50px; height: 50px; margin-left : 500px; background-color: aqua; } } </style> </head> <body> <div class="test1">1</div> <div class="test2">2</div> </body> </html> ボックスが居ろを変えながら、動くアニメーションができました。後は並べ方などを工夫してみます。ありがとうございました。

行動規範の内容に同意します