イベントでstyleを変更するjavascript

ターゲットにclass="k_fly_out_div"をつける

何個でもOKなのでとりあえずスタイルを変更するDIVとかにclass="k_fly_out_div"をつけてください

ターゲットにdata-kfod-end-style=""を追加

ターゲットに独自属性を付けて、変更後のスタイルを書いていってください。
変更前のスタイルはどっか別のとこに書いといてくださいね

ターゲットにdata-kfod-end-timer=""をつける

イベントが発生するタイミングをミリ秒で書いてください。onloadから1000ミリ秒とかそんな感じ

スクリプトを読み込んでください。

下記のスクリプトをどこかで読み込んで下さい。
ターゲットが読み込まれた後に読み込むか
DOMContentLoadedとかのイベントに登録するか
jQueryのreadyの中に書くか、とりあえずDOMが用意されてから読み込んでくださいね。
下記はDOMContentLoadedで登録してます。

ターゲットはこんな感じ

<div class="k_fly_out_div" style="background-color:red;color:#fff;transition:all 0.3s ease-out 0ms;position:absolute;top:0px;opacity:0.1" data-kfod-end-timer="1000" data-kfod-end-style="background-color:blue;top:20px;padding:10px;opacity:1">変化するやーつー</div>

読み込むスクリプト

(function (doc) {
	doc.addEventListener('DOMContentLoaded', function () {
	//今回はDOMContentLoadedで実行
	
		kFlyOutDiv();//ここはターゲットが読み終わってから読んでね
		
		function kFlyOutDiv () {
			var reg = new RegExp('(^| +)k_fly_out_div($| +)'),
					nodeList = [],
					el = document.getElementsByTagName('*');
			for (var i = 0; i < el.length; i++) {
				if (reg.test(el[i].className)){
					nodeList.push(el[i]);
				}
			}
			for (var i = 0, max = nodeList.length; i < max; i++) {
				var end_styles = nodeList[i].getAttribute("data-kfod-end-style"),
						end_timer = nodeList[i].getAttribute("data-kfod-end-timer");
				
				if (end_styles !== null) {
					if (end_styles.slice(-1) ===';') end_styles = end_styles.substr( 0 , (end_styles.length-1) );
					end_styles = end_styles.split(";");
					(function(node_, end_styles_, end_timer_) {
						setTimeout(function() {
							for (var j = 0, max = end_styles_.length; j < max; j++) {
								var end_style = end_styles_[j].split(":");
								end_style[0] = end_style[0].replace(/\-(\w)/g, function (m, c) {
									return c.toUpperCase();
								});
								node_.style[end_style[0]] = end_style[1];
							}
						}, end_timer_);
					}(nodeList[i], end_styles, end_timer));
				}
			}
		}
		
	}, false);
}(document));