We Keep Coding

How to set keyframes 50% using jquery(or javascript)?

I'm making time(second) bar.
When opening page, bar's width should be (second/60)*100%.
I want to start from 50% instead of the beginning.
Using jquery or javascript.
Please tell me about.
#loader {
width: 50%;
height: 5px;
background-color: #fff;
animation-name: loadingBar;
animation-duration: 60s;
animation-timing-function: steps(60, end);
animation-direction: normal;
animation-play-state: running;
animation-iteration-count: infinite;
#keyframes loadingBar {
0% {
width: 0%;
}
100% {
width: 100%;
}
}

Hi Could you try this overwrite the style existing.And also remove it if required to get old behavior
function setStyle() {
let st = document.createElement("style");
st.id="RemoveMeInFuture";
const stext=`#keyframes loadingBar {
50% {
width: 0%;
}
100% {
width: 100%;
}
}
.foo{background:red}`;
document.querySelector("head").appendChild(st);
if (st.styleSheet){
// This is required for IE8 and below.
st.styleSheet.cssText = stext;
} else {
st.appendChild(document.createTextNode(stext));
}
}

Fade the same image in and out in one line of CSS automatically

I have an image that I want to fade in and out automatically. I've read about transitions and animations and would like to use one or two styles (not style declarations). It's OK to start the animation via JavaScript.
In this example on MDN you can see that the items are animated on page load by switching classes. I would like it to be simpler than that.
Here is what I have so far and it seems like it should work but it's not.
function updateTransition(id) {
var myElement = document.getElementById(id);
var opacity = myElement.style.opacity;
if (opacity==null || opacity=="") opacity = 1;
myElement.style.opacity = opacity==0 && opacity!="" ? 1 : 0;
}
var id = window.setInterval(updateTransition, 5000, "myElement");
updateTransition("myElement");
#myElement {
background-color:#f3f3f3;
width:100px;
height:100px;
top:40px;
left:40px;
font-family: sans-serif;
position: relative;
animation: opacity 3s linear 1s infinite alternate;
}
<div id="myElement"></div>
Also, here is an example of an animation on infinite loop using a slide animation (3 example in the list). I'd like the same but with opacity.
https://developer.mozilla.org/en-US/docs/Web/CSS/animation
The linked question is not the same as this. As I stated, "single line styles (not style declarations)".

What you need is to define your animation using keyframes. If you are trying to apply multiple animations, you can provide a list of parameters to the animation CSS properites. Here's an example that applies a slide in and fade animation.
.fade {
width:100px;
height:100px;
background-color:red;
position:relative;
animation-name:fadeinout, slidein;
animation-duration:2s, 1s;
animation-iteration-count:infinite, 1;
animation-direction:alternate, normal;
}
#keyframes fadeinout {
0% {
opacity:0
}
100% {
opacity:100
}
}
#keyframes slidein {
from {
left:-100px;
}
to {
left:0px;
}
}
<div class='fade'>
</div>

You can use animation-iteration-count :
#myElement {
background-color: #f3f3f3;
width: 100px;
height: 100px;
top: 40px;
left: 40px;
font-family: sans-serif;
position: relative;
animation: slidein 2s linear alternate;
animation-iteration-count: infinite;
}
#keyframes slidein {
0% {
opacity: 0;
left: -100px;
}
50% {
opacity: 1;
left: 40px;
}
100% {
opacity: 0;
left: -100px;
}
}
<div id="myElement"></div>

CSS Transition No jQuery; Display then Hide

I built a card game where upon clicking a button the display will either be "Correct!" or "Wrong!" I would like the display to flash and then go away after a couple second but not rearrange the content below it, which in this case is the #winStreak and #longestStreak. I do not want to use jQuery. I have tried adding transitions to CSS, but that does not seem to work.
HTML:
<p id="displayResult"></p>
<p id="winStreak"></p>
<p id="longestStreak"></p>
CSS:
#displayResult {
margin-bottom: 1rem;
transition: 2s ease-in-out;
}
JavaScript:
let foldButton = document.getElementById("foldBTN")
foldButton.addEventListener("click", function(){
if (!table[position].includes(completeHand) && !table[position].includes(completeHand2)) {
document.getElementById("displayResult").innerHTML = "Correct!";

I believe you might use CSS animation:
var result = document.getElementById('displayResult');
result.addEventListener('animationend', function() {
result.classList.remove('flashit');
});
let foldButton = document.getElementById('foldBTN');
foldButton.addEventListener('click', function() {
result.innerHTML = 'Correct!';
result.classList.add('flashit');
});
#displayResult {
font-size:3rem;
height: 1.3em;
margin-bottom: 1rem;
opacity: 0;
}
#displayResult.flashit {
animation: flashit 3s;
}
#keyframes flashit {
5% {opacity:.5}
10% {opacity:1}
15% {opacity:.2}
20% {opacity:1}
40% {opacity:1}
100% {opacity:0}
}
<div id="displayResult"></div>
<button id="foldBTN">CLICK ME</button>

How to control the transform distance with pure JavaScript

I made this
http://codepen.io/adamchenwei/pen/dOvJNX
and I try to apply a certain way of moving for a dom so it move for a fixed distance and stop, instead of animate and move through the whole width of the dom. However, I don't really want to fix the distance inside the css keyframe because I need to detect that distance dynamically, since my div that got animated ideally will change the width dynamically as well since that is not going always be 100% or any specific px fixed.
Is there way I can do that in JavaScript instead and not let css to take charge in this transform distance part?
Cross browser capacity will be great.
SCSS
.myItem {
height: 100px;
width: 501px;
background-color: beige;
animation: to-left-transition 300ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
#keyframes to-left-transition {
0% {
transform: translate(0);
}
100% {
transform: translate(100%);
}
}
HTML
<div class="myItem">
stuff here
</div>

Found out a better way. Soooooo much easier!
I should have been using transition instead of animation. As that give me the flexibility to adjust the animation accordingly.
Hope it helps someone else to save couple hours!
http://codepen.io/adamchenwei/pen/xRqYNj
HTML
<div class="myItem">
stuff here
</div>
CSS
.myItem {
position: absolute;
height: 100px;
width: 501px;
background-color: beige;
transition: transform 1s;
}
JS
setTimeout(function() {
document.getElementsByClassName('myItem')[0].style.transform="translateX(400px)";
console.log('ran');
}, 3000);

EDIT
Below is a method sugguested by Dennis Traub
setTimeout(function() {
console.log('ran');
$("head").append('<style type="text/css"></style>');
var new_stylesheet = $("head").children(':last');
new_stylesheet.html('.myItem{animation: to-left-transition 600ms;}');
}, 3000);
.myItem {
position: absolute;
height: 100px;
width: 501px;
background-color: beige;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
#keyframes to-left-transition {
0% {
transform: translate(0);
}
100% {
transform: translate(100%);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item" class="myItem">
stuff here
</div>
Answer Before EDIT
Here is a good reference for something similar to what i think you are trying to accomplish.
Based on your dynamic input you could have a function that controls how far the div transitions. Still use your code for transition in the css, but compute how far you want in the jquery or JavaScript. Then call the css transition for how far or long you want to transition.
var boxOne = document.getElementsByClassName('box')[0],
$boxTwo = $('.box:eq(1)');
document.getElementsByClassName('toggleButton')[0].onclick = function() {
if(this.innerHTML === 'Play')
{
this.innerHTML = 'Pause';
boxOne.classList.add('horizTranslate');
} else {
this.innerHTML = 'Play';
var computedStyle = window.getComputedStyle(boxOne),
marginLeft = computedStyle.getPropertyValue('margin-left');
boxOne.style.marginLeft = marginLeft;
boxOne.classList.remove('horizTranslate');
}
}
$('.toggleButton:eq(1)').on('click', function() {
if($(this).html() === 'Play')
{
$(this).html('Pause');
$boxTwo.addClass('horizTranslate');
} else {
$(this).html('Play');
var computedStyle = $boxTwo.css('margin-left');
$boxTwo.removeClass('horizTranslate');
$boxTwo.css('margin-left', computedStyle);
}
});
.box {
margin: 30px;
height: 50px;
width: 50px;
background-color: blue;
}
.box.horizTranslate {
-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
margin-left: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Pure Javascript</h3>
<div class='box'></div>
<button class='toggleButton' value='play'>Play</button>
<h3>jQuery</h3>
<div class='box'></div>
<button class='toggleButton' value='play'>Play</button>
This code was written by Zach Saucier on codepen
This is a good reference for manipulating css with JS: https://css-tricks.com/controlling-css-animations-transitions-javascript/

Hide a div following css animation on button click

As the current time, I have CSS3 Animations being triggered on button click, and all works well. Its an animation to represent the plant life cycle, working in 5 stages, each stage shows an image and corresponding text.
However, if i click stage 1, then stage 2, and want to click stage 1 again to view the supporting text again, whilst hiding the image from stage two, I cannot seem to be able to do it.
JSFiddle for your convinience:
http://jsfiddle.net/YUC3d/
Live View of current stage:
http://www.mattmeadows.info/MFTW2/howplantsgrow.html
Javascript:
$(function() {
$("#stage1").click(function() {
$("#Seed1,#infoBox1").toggleClass("animate")
});
$("#stage2").click(function() {
$("#Seed2,#infoBox2").toggleClass("animate")
});
$("#stage3").click(function() {
$("#Seed3,#infoBox3").toggleClass("animate")
});
$("#stage4").click(function() {
$("#Seed4,#infoBox4").toggleClass("animate")
});
$("#stage5").click(function() {
$("#Seed5,#infoBox5").toggleClass("animate")
});
});
HTML Segment being animated:
<div id="Seed1" class="target">
</div> <!-- end of Seed1 -->
<div id="infoBox1">
Text for stage 1 Text for stage 1 Text for stage 1 Text for stage 1 Text for stage 1
</div>
(There are 5 of these div combinations in total
CSS:
#-webkit-keyframes show
{
0% { opacity: 0; }
100% { opacity: 1; }
}
#Seed1
{
opacity:0;
}
#Seed1.animate
{
-webkit-animation-name: show;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#infoBox1
{
width: 400px;
height: 100px;
background:white;
position: absolute;
bottom: 425px;
margin-left: 25px;
border-radius: 10px;
opacity:0;
}
#infoBox1.animate
{
-webkit-animation-name: show;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}

Presuming that 'animate' is the 'on' class (it seems to be), try making a method that resets everything then animate the specific element:
function setStage(stage) {
var numberOfStages = 5;
for (i=1; i <= numberOfStages; i++) {
if (i == stage) {
$("#infoBox" + i).addClass("animate");
$("#Seed" + i).addClass("animate");
} else if (i < stage) {
$("#infoBox" + i).removeClass("animate");
$("#Seed" + i).addClass("animate");
} else {
$("#infoBox" + i).removeClass("animate");
$("#Seed" + i).removeClass("animate");
}
}
}
Example use:
$(document).ready(function() {
$("#stage1").click(function() {
setStage(1);
});
//stage 2,3,5 etc...
$("#stage4").click(function() {
setStage(4);
});
});

Presuming that 'animate' is the 'on' class (it seems to be), try making a method that resets everything then animate the specific element:
function resetState() {
//you can use classes here to make it neater
$("#Seed1,#infoBox1,#Seed2,#infoBox2,#Seed3,#infoBox3,#Seed4,#infoBox4,#Seed5,#infoBox5").removeClass("animate");
}
Example use:
$("#stage1").click(function() {
resetState();
$("#Seed1,#infoBox1").toggleClass("animate");
});