599316527/demo.html

## demo.html
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>test</title>
        <style type="text/css">
div {
  width: 100px;
  height: 100px;
  background: red;
  animation: aaa 3s ease-in forwards;
}

.ani {
  animation: bbb 1600ms forwards;
}

@keyframes aaa {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes bbb {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(200px, 0);
  }
}
        </style>
    </head>
    <body>

<div> </div>
<a href="https://twitter.com/kyleehee/status/984059601539616768" target="_self">jump </a>


<script type="text/javascript">
document.querySelector('div').addEventListener('animationend', function () {
    var a = this
    if (this.classList.contains('ani')) {
        // applyStyles(document.body)
        // var style = document.querySelector('style')
        // style.textContent = removeKeyframes(style.textContent)
        return
    }
    setTimeout(function () {
        a.classList.add('ani')
    }, 400)
})

window.addEventListener('pageshow', function (event) {
    if (event.persisted) {
        console.log('pageshow')
    }
})

window.addEventListener('beforeunload', function () {
  console.log('beforeunload')
})
window.addEventListener('unload', function () {
  console.log('unload')
})

function applyStyles(el) {
  if (el.children) {
    Array.from(el.children).forEach(applyStyles)
  }
  let style = getComputedStyle(el)
  let keys = Array.from(style)
  if (keys.indexOf('animation-name') >= 0) {
    keys.forEach(function (key) {
      if (/^animation-/.test(key)) return
      el.style[key] = style[key]
    })
  }
}

function removeKeyframes(content) {
    let k = 0
    let mark = '@keyframes'
    let index
    while ((index = content.indexOf(mark)) >= 0) {
        if (k++ > 5288) break;
        let count = 0
        for (let i = index + mark.length; i < content.length; i++) {
            let c = content.charAt(i)
            if (c === '{') {
                count++
            }
            else if (c === '}') {
                if (--count === 0) {
                    content = content.substring(0, index) + content.substring(i + 1)
                }
            }
        }
    }
    return content
}
</script>

    </body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>test</title>
	<style type="text/css">
	div {
	width: 100px;
	height: 100px;
	background: red;
	animation: aaa 3s ease-in forwards;
	}

	.ani {
	animation: bbb 1600ms forwards;
	}

	@keyframes aaa {
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
	}
	@keyframes bbb {
	0% {
	transform: translate(0, 0);
	}
	100% {
	transform: translate(200px, 0);
	}
	}
	</style>
	</head>
	<body>

	<div> </div>
	<a href="https://twitter.com/kyleehee/status/984059601539616768" target="_self">jump </a>



	<script type="text/javascript">
	document.querySelector('div').addEventListener('animationend', function () {
	var a = this
	if (this.classList.contains('ani')) {
	// applyStyles(document.body)
	// var style = document.querySelector('style')
	// style.textContent = removeKeyframes(style.textContent)
	return
	}
	setTimeout(function () {
	a.classList.add('ani')
	}, 400)
	})

	window.addEventListener('pageshow', function (event) {
	if (event.persisted) {
	console.log('pageshow')
	}
	})

	window.addEventListener('beforeunload', function () {
	console.log('beforeunload')
	})
	window.addEventListener('unload', function () {
	console.log('unload')
	})

	function applyStyles(el) {
	if (el.children) {
	Array.from(el.children).forEach(applyStyles)
	}
	let style = getComputedStyle(el)
	let keys = Array.from(style)
	if (keys.indexOf('animation-name') >= 0) {
	keys.forEach(function (key) {
	if (/^animation-/.test(key)) return
	el.style[key] = style[key]
	})
	}
	}

	function removeKeyframes(content) {
	let k = 0
	let mark = '@keyframes'
	let index
	while ((index = content.indexOf(mark)) >= 0) {
	if (k++ > 5288) break;
	let count = 0
	for (let i = index + mark.length; i < content.length; i++) {
	let c = content.charAt(i)
	if (c === '{') {
	count++
	}
	else if (c === '}') {
	if (--count === 0) {
	content = content.substring(0, index) + content.substring(i + 1)
	}
	}
	}
	}
	return content
	}
	</script>

	</body>
	</html>