TAG
CSS
JavaScript
Result
Run
License
<input type="radio" id="fillmode-none" name="fillmode" value="none" /> <label for="fillmode-none">none</label> <input type="radio" id="fillmode-forwards" name="fillmode" value="forwards" /> <label for="fillmode-forwards">forwards</label> <input type="radio" id="fillmode-backwards" name="fillmode" value="backwards" /> <label for="fillmode-backwards">backwards</label> <input type="radio" id="fillmode-both" name="fillmode" value="both" /> <label for="fillmode-both">both</label> <div class="target"></div> <p class="msg"></p>
.target { position: relative; width: 100px; height: 100px; left: calc(50vw - (100px / 2)); background: #00FF00; } @keyframes ani { 0% { background: #FF0000; } 50% { background: #FFFF00; } 100% { background: #0000FF; } }
window.addEventListener("load", function() { var aInputEl = document.querySelectorAll("input"); var msgEl = document.querySelector(".msg"); aInputEl.forEach(function(item, index, array) { item.addEventListener("click", function() { var msg; var fillMode = item.value; var targetEl = document.querySelector(".target"); var clone = targetEl.cloneNode(true); targetEl.parentNode.replaceChild(clone, targetEl); clone.style.animationName = "ani"; clone.style.animationFillMode = fillMode; clone.style.animationDuration = "2s"; clone.style.animationDelay = "2s"; switch(fillMode) { case "none": msg = "원래의 배경색(녹색)을 가지고 있다가 2초후에 첫번째 키프레임에서 지정한"; msg += " 빨간색을 가지게 되며 애니메이션이 끝나면 원래의 배경색(녹색)으로 돌아온다."; msgEl.innerText = msg; break; case "forwards": msg = "원래의 배경색(녹색)을 가지고 있다가 2초후에 첫번째 키프레임에서 지정한"; msg += " 빨강색을 가지게 되며 애니메이션이 끝나면 마지막 키프레임에서 지정한 파랑색을 유지한다."; msgEl.innerText = msg; break; case "backwards": msg = "대기 시간이 지정되어 있지만 시작하자 마자 첫 키프레임에 지정된 배경색(빨강색)을 가지고 대기하며"; msg += " 2초후에 애니메이션이 시작되고 애니메이션이 끝나면 원래의 배경색(녹색)으로 돌아온다."; msgEl.innerText = msg; break case "both": msg = "시작하자 마자 첫 키프레임에 지정된 배경색(빨강색)을 가지고 2초후에 애니메이션이 시작되며"; msg += " 애니메이션이 끝나면 마지막 키프레임에서 지정한 배경색(파랑색)을 유지한다."; msgEl.innerText = msg; } }); }); })
Console
expand_less
License
License
by DevDic
Close