Home › Forums › JavaScript › Triggering a keyframe animation on a specific js variable value. › Reply To: Triggering a keyframe animation on a specific js variable value.
Here you go.
html
`
<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>
<title>Untitled Document</title>
<link href=”css/expanding_box.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div class=”BoxBreath” id=”BoxBreath”></div>
<script type=”text/javascript”>
jQuery(document).ready(function() {
var trigger = 1;
if (trigger = 1) {
jQuery(“#BoxBreath”).css(‘background-color’, ‘#0F6’);
};
});
</script>
</body>
and the css
`
@charset “utf-8”;
/* CSS Document */
- { margin: 0; padding: 0; border: 0; }
.BoxBreath {
position:relative;
top:300px;
left:300px;
width:200px;
height:100px;
background-color:#C0F;
animation: breath linear 1s infinite;
}
@keyframes breath{
0% {
opacity:0;
transform: rotate(0deg) scaleX(0) scaleY(0) ;
}
50% {
opacity:1;
transform: rotate(0deg) scaleX(1) scaleY(1) ;
}
100% {
opacity:0;
transform: rotate(0deg) scaleX(0) scaleY(0) ;
}
}
`
</html>
`