Develop Reference

problem with removing animation and show full size image HTML/CSS/JS

I write a mini project at html,css,js.
I have an 20% width image that moves with an infinite animation left to right.
for example:
.img {
width: 20%,
animation: move infinite;
}
#keyframes move {
from {
left: 100%;
}
to {
left: -50%;
}
}
I want, when I press the image to come to the center of the screen with its actual width.
My problem is when I remove the animation class (cause it needs to stop moving), I lose the left & top attributes of the image and also the transition from 20% width to full-width does not work smoothly. Any ideas on how this can be implemented?
Thanks

You basically wrote the requirements correctly in the question. The problem is, you did not code step by step what you want. Read again your requirements like so:
1. I have an 20% width image that moves with an infinite animation left to right
2. I want, when I press the image to come to the center of the screen with its actual width.
3. My problem is when I remove the animation class (cause it needs to stop moving)
So basically there are 3 states:
the image with what ever styles, image class => .img
animation the image has some sort of animation, animation class => .animate
finished at some stage we have a "finished" animation state, finished class => .finish
Like so you have defined three states in CSS where you can later just add/remove properties for any given state and you can add/remove the classes to the element (in this case the image).
(Cause it is really hard to click on a moving element, I've created a wrapper with a click-area. Obviously you can change the click event listener back to the image and try, it's really hard to click it...)
var image = document.querySelector('img');
var clickArea = document.querySelector('.click-area');
clickArea.addEventListener('click', function(){
image.classList.add('finish');
image.classList.remove('animate');
});
.wrapper {
position: relative;
width: 100%;
height: 300px;
border: solid 2px orange;
}
.img {
position: absolute;
}
.finish {
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
-moz-transform: translate(-50%, -50%); /* Firefox */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-o-transform: translate(-50%, -50%); /* Opera */
}
.animate {
width: 20%;
animation: move infinite 2s;
}
#keyframes move {
from { left: 100%; }
to { left: -50%; }
}
<div class="wrapper click-area">
<img class="img animate" src="https://picsum.photos/200/300" />
</div>
If there are multiple of those images on the same page it's almost the same! Figure out the differences for yourself.
var clickAreas = document.querySelectorAll('.click-area');
[...clickAreas].forEach(function(clickArea){
var image = clickArea.querySelector('img'); // find only the image inside the click-area
clickArea.addEventListener('click', function(){
image.classList.add('finish');
image.classList.remove('animate');
});
});
.wrapper {
position: relative;
width: 100%;
height: 100px; /* tweaked the height so we can see more the just one */
border: solid 2px orange;
}
.img {
position: absolute;
width: auto; /* tweaked the height so we can see more the just one */
height: 100px; /* tweaked the height so we can see more the just one */
}
.finish {
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
-moz-transform: translate(-50%, -50%); /* Firefox */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-o-transform: translate(-50%, -50%); /* Opera */
}
.animate {
width: 20%;
animation: move infinite 2s;
}
#keyframes move {
from { left: 100%; }
to { left: -50%; }
}
<div class="wrapper click-area">
<img class="img animate" src="https://picsum.photos/200/300" />
</div>
<div class="wrapper click-area">
<img class="img animate" src="https://picsum.photos/200/300" />
</div>
<div class="wrapper click-area">
<img class="img animate" src="https://picsum.photos/200/300" />
</div>

Javascript button to toggle multiple css animations

I currently have a series of containers with a flip animation that activates on hover. I would like for them to not only activate on hover, but also on a javascript button click that would use a single button to toggle flip all.
HTML:
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<a href="link1.html">
<img src="images/frontimg1.jpg"/>
</a>
</div>
<div class="back">
<div class="fliplinks">
<a href="link1.html">
<p>text1</p>
</a>
</div>
</div>
</div>
</div>
These are repeated for as many objects as I use and rely on the following CSS:
.flip-container {
float:left;
margin: 7.5px;
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 210px;
height: 210px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
Edit: A jsfiddle as requested: https://jsfiddle.net/futbyyef/

Assuming that they all have the .flip-container class, you could add a function like this.
<script>
$('.toggle-button').click(function(){
$('.flip-container').toggleClass('hover');
}
</script>
Then you just need to include a button to toggle it. Something like
<button class="toggle-button">Test Button</button>
Here is a fiddle that works. Make sure to include jQuery on your page.

implementing flipcard on click instead of on hover

I have implemented a css flipcard effect, which works on hover using css. See css code below. However I want to implement the flipcard effect on click by using jQuery. I have tried everything but cannot figure it out.
Here is the javascript that I thought would work.
$('.flip-container .flipper').click(function(){
$(this).css('transform, rotateY(180deg)');
});
Please see below for code that works with hover.
html
<div class="flip-container">
<div class="flipper">
<div class="front artist-1">
<!-- front content -->
</div>
<div class="back">
<p>You won</p>
</div>
</div>
</div>
css
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 250px;
height: 250px;
}
/* flip speed */
.flipper {
transition: 0.8s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background-color: #fff;
}
.artist-1 {
background: url(http://img.bleacherreport.net/img/images/photos/003/556/940/edab30087cea36c0ca206fc61a4b10fa_crop_north.jpg?w=630&h=420&q=75) center center no-repeat;
background-size: cover;
}

To make this work you need to remove the :hover rule on the .flip-container element in your CSS:
/* .flip-container:hover .flipper, */
.flip-container.hover .flipper {
transform: rotateY(180deg);
}
Then in your JS you need to toggle the hover class when the element is clicked instead:
$('.flip-container .flipper').click(function() {
$(this).closest('.flip-container').toggleClass('hover');
$(this).css('transform, rotateY(180deg)');
});
Working example
Note that it may also be worth changing the class name from hover now too, otherwise it may get confusing when you come to maintain the code at a later date

what you need to do is to change your css from being triggered on :hover pseudo element to a class which you need to toggle via jquery.
css
/* flip the pane when clicked */
.flip-container .flipper.flip {
transform: rotateY(180deg);
}
JS
$('.flip-container .flipper').click(function(){
$(this).toggleClass("flip");
});
here is a working Fiddle

JS animation spin on hover

This is my first question on stackoverflow.
Wondering if anyone can point me to a solution/resource on animating buttons using JS/JQuery.
Particularly, the animation I can't figure out is spinning a circular button 180 degrees on hover.
Thanks :)

You can use css keyframes
div {
width: 100px;
height: 100px;
background: red;
position :relative;
-webkit-animation: mymove 1s infinite; /* Chrome, Safari, Opera */
animation: mymove 1s infinite;
}
/* Standard syntax */
#keyframes mymove {
from { transform: rotateY(0deg);}
to { transform: rotateY(360deg);
}

you can animate buttons using CSS.
At http://www.w3schools.com/css/css3_animations.asp you can learn about CSS animations. You may also want to learn about CSS transitions at http://www.w3schools.com/css/css3_transitions.asp. If you what to create an animation using JS what you would do is set a CSS transition on the HTML element that you want to animate and then use JS to set CSS properties like background-color and transform. You can access the CSS of an element using element.style.property. replace property with the property you want to change or add.

The most intuitive answer I found was this:
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="front">
<!-- front content -->
</div>
<div class="back">
<!-- back content -->
</div>
</div>
</div>
/*CSS entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 480px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
Further explanation can be found here: https://davidwalsh.name/css-flip

how to make transition of stacked Divs. in JavaScript

i am trying to make "memory game" using html5, CSS3 and JS. I have completed the view and model part of this game and now trying to make the Controller. What i want is call a function i.e. flip in JS and want that function to perform transition instead of using hover effect of CSS3. Basically i am trying to follow this approach. I checked that flipping in css3 using hover as can be seen in sass code below, but for the game, the user decides where to click. For simplicity, i have concised the code in html5 since it repeats for all other divs.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>I Don't Know</title>
<link rel="stylesheet" href="trapStyle.css">
</head>
<body>
<div class = "container" >
<div class="sub1" >
<div class="front" id="card1" onclick="flip(card1)">card1</div>
<div class="back" id="card1_1">what the hell?</div>
</div> <--sub1 Ends-->
<div class="sub1">
<div class="front" id="card2" onclick="flip(this)">card2</div>
<div class="back" id="card2_2">what the hell?
</div> <--sub1 Ends-->
</div> <-- container Ends -->
<script src ="script.js"></script>
</body>
</html>
and the SASS code for css
.container {
position: absolute;
left: 115px;
width: 1150px;
height: 700px;
background-color: silver;
/* SUB-CONTAINER to stack two cards */
.sub1 {
width: 200px; height: 200px;
float:left; margin: 5px;
.front {
position:absolute; width: 200px; height: 200px;
background-color: #498010;
transform: perspective( 600px) rotateY(0deg);
backface-visibility: hidden;
transition: transform 0.5s linear 0s;
}
.back {
position: absolute; width: 200px; height: 200px;
float:left; background-color: #689;
transform: perspective( 600px) rotateY(180deg);
backface-visibility: hidden;
transition: transform 0.5s linear 0s;
}
}
.sub1:hover > .front {
/* transform: perspective(600px) rotateY(-180deg); */
}
.sub1:hover > .back {
/* transform: perspective(600px) rotateY(0deg); */
}
}
and JavaScript
function flip(front) {
document.getElementById("front").style.transition = opacity 0.5s linear 0s;
document.getElementById("front").style.opacity = 0;
}
Note: the link, above, is trying to pass id to JS function where the transition takes place. Exactly same is being done here, just to get input from user instead of just hovering, but nothing happens! I copy/pasted the link code in my editor and smooth transitions are performed but when it comes of my code, nothing! Could you tell me where is my flaw?

Change your CSS from the hover state to a class, for iunstance change .sub1:hover to .hovered:
.container .hovered > .front {
transform: perspective(600px) rotateY(-180deg); }
.container .hovered > .back {
transform: perspective(600px) rotateY(0deg); }
And now, on click, add this class to the element clicked:
$(".sub1").click(function() {
$(this).addClass ('hovered');
})
fiddle
this function in javascript would be
function change(element) {
element.className = element.className + " hovered";
}
provided that you send the element in the function call
onclick="change(this)"
fiddle - function set only in the first div