float1251/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Sample Animation</title>

    <link rel="stylesheet" href="sample.css"/>
</head>
<body>


<ul>
    <li>テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１</li>
    <li>テキスト２</li>
    <li>テキスト３</li>
    <li>テキスト４</li>
    <li>テキスト５</li>
</ul>

<div>
    <button id="animation-button">Animatin Start</button>
    <button id="animation-button2">Animatin Back</button>
    <button id="animation-button3">increment index</button>
</div>

<div id="ruler"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="sample.js"></script>
<script src="underscore.js"></script>
</body>
</html>

## sample.css
li{
    list-style: none;
    white-space: nowrap;
    display: none;
    background: red;
}

#ruler{
    display: inline-block;
    white-space: nowrap;
}

.animation{
    display: inline-block;
    -webkit-animation: anim 5s linear  forwards;
}

.animation2{
    display: inline-block;
    -webkit-animation: anim2 5s linear  forwards;
}

## sample.ts

window.onload = ()=> {
    var currentIndex = 0;
    var button:HTMLElement = document.getElementById("animation-button")
    button.addEventListener("click", ()=> {
        removeAllClass()

        _.each(document.getElementsByTagName("li"), (elem, index)=> {
            console.log(elem)
            if (index == currentIndex) {
                makeAnimationCSS(elem)
                elem.classList.add("animation")
            }
        })
    })

    var button2:HTMLElement = document.getElementById("animation-button2")
    button2.addEventListener("click", ()=> {
        removeAllClass()
        _.each(document.getElementsByTagName("li"), (elem, index)=> {
            if (index == currentIndex) {
                elem.classList.add("animation2")
            }
        })
    })

    var button3:HTMLElement = document.getElementById("animation-button3")
    button3.addEventListener("click", ()=> {
        currentIndex++
        if (currentIndex == 5) {
            currentIndex = 0
        }
    })

}

function removeAllClass() {
    _.each(document.getElementsByTagName("li"), (elem, index)=> {
        elem.classList.remove("animation")
        elem.classList.remove("animation2")
    })
}

function makeAnimationCSS(elem:HTMLElement) {
    var styleSheet:any = document.styleSheets[0];
    if (!this.targetIndex) {
        this.targetIndex = (<CSSStyleSheet>document.styleSheets[0]).cssRules.length;
        this.targetIndex = this.targetIndex ? this.targetIndex : 0
    } else {
        styleSheet.deleteRule(this.targetIndex + 1)
        styleSheet.deleteRule(this.targetIndex)
    }


    var width = getTextWidth(elem.innerText)
    console.log("width:" + width)
    var keyframe = "@-webkit-keyframes anim{" +
        "   0%{" +
        "       -webkit-transform:translateX(0%);" +
        "   }" +
        "   100%{" +
        "       -webkit-transform:translateX(" + width + "px);" +
        "   }" +
        "}"
    styleSheet.insertRule(keyframe, this.targetIndex);

    var keyframe2 = "@-webkit-keyframes anim2{" +
        "   0%{" +
        "       -webkit-transform:translateX(" + width + "px);" +
        "   }" +
        "   100%{" +
        "       -webkit-transform:translateX(0%);" +
        "   }" +
        "}"
    styleSheet.insertRule(keyframe2, this.targetIndex + 1);

}

function getTextWidth(text) {
    document.getElementById("ruler").innerText = text
    return document.getElementById("ruler").offsetWidth

}


declare  module _{
    function each(list:any, iterator:Function, context?);
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Sample Animation</title>

	<link rel="stylesheet" href="sample.css"/>
	</head>
	<body>


	<ul>
	<li>テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１テキスト１</li>
	<li>テキスト２</li>
	<li>テキスト３</li>
	<li>テキスト４</li>
	<li>テキスト５</li>
	</ul>

	<div>
	<button id="animation-button">Animatin Start</button>
	<button id="animation-button2">Animatin Back</button>
	<button id="animation-button3">increment index</button>
	</div>

	<div id="ruler"></div>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="sample.js"></script>
	<script src="underscore.js"></script>
	</body>
	</html>
	li{
	list-style: none;
	white-space: nowrap;
	display: none;
	background: red;
	}

	#ruler{
	display: inline-block;
	white-space: nowrap;
	}

	.animation{
	display: inline-block;
	-webkit-animation: anim 5s linear forwards;
	}

	.animation2{
	display: inline-block;
	-webkit-animation: anim2 5s linear forwards;
	}

	window.onload = ()=> {
	var currentIndex = 0;
	var button:HTMLElement = document.getElementById("animation-button")
	button.addEventListener("click", ()=> {
	removeAllClass()

	_.each(document.getElementsByTagName("li"), (elem, index)=> {
	console.log(elem)
	if (index == currentIndex) {
	makeAnimationCSS(elem)
	elem.classList.add("animation")
	}
	})
	})

	var button2:HTMLElement = document.getElementById("animation-button2")
	button2.addEventListener("click", ()=> {
	removeAllClass()
	_.each(document.getElementsByTagName("li"), (elem, index)=> {
	if (index == currentIndex) {
	elem.classList.add("animation2")
	}
	})
	})

	var button3:HTMLElement = document.getElementById("animation-button3")
	button3.addEventListener("click", ()=> {
	currentIndex++
	if (currentIndex == 5) {
	currentIndex = 0
	}
	})

	}

	function removeAllClass() {
	_.each(document.getElementsByTagName("li"), (elem, index)=> {
	elem.classList.remove("animation")
	elem.classList.remove("animation2")
	})
	}

	function makeAnimationCSS(elem:HTMLElement) {
	var styleSheet:any = document.styleSheets[0];
	if (!this.targetIndex) {
	this.targetIndex = (<CSSStyleSheet>document.styleSheets[0]).cssRules.length;
	this.targetIndex = this.targetIndex ? this.targetIndex : 0
	} else {
	styleSheet.deleteRule(this.targetIndex + 1)
	styleSheet.deleteRule(this.targetIndex)
	}


	var width = getTextWidth(elem.innerText)
	console.log("width:" + width)
	var keyframe = "@-webkit-keyframes anim{" +
	" 0%{" +
	" -webkit-transform:translateX(0%);" +
	" }" +
	" 100%{" +
	" -webkit-transform:translateX(" + width + "px);" +
	" }" +
	"}"
	styleSheet.insertRule(keyframe, this.targetIndex);

	var keyframe2 = "@-webkit-keyframes anim2{" +
	" 0%{" +
	" -webkit-transform:translateX(" + width + "px);" +
	" }" +
	" 100%{" +
	" -webkit-transform:translateX(0%);" +
	" }" +
	"}"
	styleSheet.insertRule(keyframe2, this.targetIndex + 1);

	}

	function getTextWidth(text) {
	document.getElementById("ruler").innerText = text
	return document.getElementById("ruler").offsetWidth

	}


	declare module _{
	function each(list:any, iterator:Function, context?);
	}