Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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.

#188920
Philip1415
Participant

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’);

    };
});
&lt;/script&gt;

</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>

`