I'm creating my test webpage and I ran into a problem, there are quite a few "answers" on my issue but none was I able to implement in my code. I know I have to use javascript but I was not able to get it working.
So, I need to run css animation of movement on chosen picture, when that picture is visible on screen when I scroll down to it. Basically like on this page: https://www.photoblog.com/
So I have this code in the html as for the picture:
<img class="movepic" src="pictures/test.jpg">
And then there is this simple code for the CSS movement:
.movepic {
position: relative;
animation-name: move;
animation-duration: 3s;
visibility: visible;
animation-fill-mode: forwards;
z-index:10;
}
#keyframes move {
0% { right:0px; top:150px;}
100% {right:700px; top:150px;}
}
Is there a way to make it work so I do not need to completely redo this? Or if so, could some please give me a advice how to do it maybe with code ilustration.
Thanks a lot
I use this code for this effect:
HTML:
<img class="movepic" src="pictures/test.jpg">
CSS:
.movepic {
opacity: 0;
margin: 25px 0 0;
color: white;
padding: 10px;
}
.FadeIn {
-webkit-animation: slideIn 0.8s ease 0.3s forwards;
animation: slideIn 0.8s ease 0.3s forwards;
}
#keyframes slideIn {
0% {
-webkit-transform: translateY(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
JQuery:
var $fade = $(".movepic"); //Calling the class in HTML
$(window).scroll(function () { //Using the scroll global variable
$fade.each(function () {
fadeMiddle = $(this).offset().top + (0.4 *$(this).height());
windowBottom = $(window).scrollTop() + $(window).height();
if (fadeMiddle < windowBottom) {
$(this).addClass("FadeIn");
}
});
});
/* On Load: Trigger Scroll Once*/
$(window).scroll();
Remove the animation-name from your style rule:
.movepic {
position: relative;
animation-duration: 3s;
animation-fill-mode: forwards
visibility: visible;
z-index:10;
}
and add this class to stylesheet:
.animation-class {
animation-name: move
}
Now add the jQuery:
var has_fired;
$("html").on("scroll", function () {
if (!has_fired && $(this).scrollTop() >= $("#imgContainer").offset().top) {
$("#imgContainer").addClass("animation-class");
has_fired = true; // use this if only want fired once
}
});
The animation will now run. BTW I would add an ID (imgContainer) to your container of interest and use this as selector for matching because unless .movepic is a unique class, this function will fire for any container with the .movepic class (if .movepic is the selector).
Related
I have the following CSS animation. I'd like to change the animation-iteration-count to 1 when the element in question has the property status added. Right now the animation breaks.
Example:
setTimeout(() => {
const e = document.querySelector('div')
e.classList.add('status')
}, 5000)
div {
position: relative;
}
div::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 2px solid #00849b;
animation-name: border-animation;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
div.status::before {
animation-name: border-animation;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes border-animation {
from {
width: 0;
}
to {
width: 100%;
}
}
<div>Hiiiiiiiii!</div>
Here's an example of what you can do to make sure the animation finishes before the animation-iteration-count is updated:
Added a CSS var to the :root for the iteration count so we can target it using JS since pseudo elements are not targetable.
I've added two ways that can add the status class to the element - click or using the original setTimeout with a value that is not on an exact second (1000,2000,3000 etc.)
The code is commented with all that's happening.
// The div.
const e = document.querySelector('div');
// Variable to hold the iteration count. This updates on the animationiteration event.
let iterationCount = 0;
// Function to check the iteration.
function check_iteration_count() {
// Listen to the animationiteration on the constant e element
e.addEventListener('animationiteration', () => {
// Updates the iteration count AFTER the current iteration is finished.
iterationCount++;
// Since this function starts the increment, once the iteration finishes, it will be 1.
if (iterationCount === 1) {
// updates the CSS var to the desired iteration count of 1 to stop the animation.
document.documentElement.style.setProperty('--iteration-count', '1');
}
});
}
// On click.
e.addEventListener('click', (event) => {
// Adds the status class to the div.
event.target.classList.add('status');
// Now run the function to increment the iterator.
check_iteration_count();
});
// Original timeout function. Uses a value that's not a direct second.
setTimeout(() => {
// Adds the status class to the div.
e.classList.add('status');
// Runs the function to update the iterator.
check_iteration_count();
}, 5100);
:root {
--iteration-count: infinite;
}
div {
position: relative;
}
div::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-bottom: 2px solid #00849b;
transition: border-bottom .3s ease;
animation-name: border-animation;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: var(--iteration-count);
animation-fill-mode: forwards;
}
/* just for fun to show the status class was added */
div.status::before {
border-bottom-color: red;
}
div.status::before {
animation-name: border-animation;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: var(--iteration-count);
animation-fill-mode: forwards;
}
#keyframes border-animation {
from {
width: 0;
}
to {
width: 100%;
}
}
<div>Hiiiiiiiii!</div>
I have an image on my page representing an up arrow and, which is used to jump to the top of the page thanks to a link). This image has an opacity of "0.2", and "1" when hovering over it with the mouse.
From a smartphone or tablet, when you press on this image, the opacity remains at "1".
I would like this opacity to return to "0.2" after pressing this one.
How to do please?
My HTML code :
<img src="./img/up.png" alt="up" title="up">
My CSS code :
a > img {
width: 60%;
height: 60%;
opacity: 0.2;
}
a > img:hover {
opacity: 1;
}
Thanks
A solution with Javascript/Jquery
I modified an answer of mine of few days ago
$('#clickMe').click(function () {
$(this).addClass('tothetop');
$(this).on("animationend", function(event) {
$(this).removeClass('tothetop')
});
});
img {
opacity:0.2;
}
.tothetop {
animation-fill-mode: forwards;
animation-name: test;
animation-duration: 2s;
}
#keyframes test {
50% {opacity:1;}
100% {opacity:0.2;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="clickMe" src="https://picsum.photos/200">
A solution using only CSS
#keyframes move {
50% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
img {
animation-fill-mode: forwards;
opacity:0.2;
}
img:hover {
animation: move 2s;
}
<img src="https://picsum.photos/200">
A Pure CSS Solution without JavaScript
The problem lies with how best to implement :hover on interfaces where the user is not using a cursor controlled by a mouse or trackpad or a keyboard.
There isn't (yet) a perfect way to do this.
It doesn't exist, but we could imagine that the touchscreen counterpart to:
my-div:hover
might be:
my-div:touch
where the :hover behaviour is displayed for a second or two and then no longer displayed.
In the absence of a hypothetical :touch pseudo-class however, we can nevertheless implement one - and in CSS alone, without using JavaScript.
We can do this by introducing an animation for touchscreens - something like this:
#keyframes hoverForTouchScreens {
0%, 50% {
opacity: 1;
}
}
We can also ensure that this animation only fires on touchscreens with a #media query:
#media screen and (hover: none) and (pointer: coarse) {
a > img:hover {
opacity: 0.2;
animation: hoverForTouchScreens 2s ease-out;
}
}
Working Example
Putting it all together:
a > img {
opacity: 0.2;
}
a > img:hover {
opacity: 1;
}
a > img.touchscreen-simulation:hover {
opacity: 0.2;
animation: hoverForTouchScreens 2s ease-out;
}
#keyframes hoverForTouchScreens {
0%, 50% {
opacity: 1;
}
}
#media screen and (hover: none) and (pointer: coarse) {
a > img:hover {
opacity: 0.2;
animation: hoverForTouchScreens 2s ease-out;
}
}
<a href="#top">
<img src="https://picsum.photos/120/120" alt="up" title="up">
<img class="touchscreen-simulation" src="https://picsum.photos/120/120" alt="up" title="up">
</a>
<p>The <code>#media query</code> won't be active on non-touch screens, so the <strong>image on the right</strong> is set up to simulate what <em>would</em> happen on a touchscreen in this setup.</p>
Working Example:
I am trying to make a loading animation. I am using css transition to transition into the loading by scaling and then using animation to scale out the x axis. But when I try to transition back to the original state it doesn't use the transition anymore it just snaps back. I could use animation for the whole thing but I want to account for the page continuing to load so I don't want to have to write extra javascript logic to handle it. It would be nice if It would just transition on its own.
When you click the following snippet the first time it works fine. But when you click it again it just snaps back to its original state and doesn't use the transition. If you use a different property like opacity in the animation part then it works fine so I'm assuming there is something with the browser not recognizing the current scaled value. Is this a bug or am I doing something wrong?
document.querySelector('.wrapper').addEventListener('click', () => {
document.querySelector('.wrapper').classList.toggle('loading')
})
.wrapper{
position:fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wrapper > div{
color: white;
display:flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: blue;
transition: transform 500ms ease-out;
transform: scale(1);
}
.wrapper.loading > div{
transform: scale(0.2, 0.002);
animation: loading 1000ms ease-out infinite;
animation-delay: 500ms;
}
#keyframes loading {
0%{
transform: scale(0.2, 0.002)
}
50%{
transform: scale(0.5, 0.002)
}
100%{
transform: scale(0.2, 0.002)
}
}
<div class="wrapper">
<div>click me</div>
</div>
TL;DR
I believe that this happens because CSS transition eventually gives a class two states and transitions between them, when you remove your class you don't change its state, you remove it. my solution would be to add another class to set it back.
CSS transitions work by defining two states for the object using CSS. In your case, you define how the object looks when it has the class "loading" and you define how it looks when it doesn't have the class "saved" (it's normal look). When you remove the class "loading", it will transition to the other state according to the transition settings in place for the object without the "loading" class.
If the CSS transition settings apply to the object (without the "loading" class), then they will apply to both transitions.
your transition CSS settings only apply to .saved and thus when you remove it, there are no controls to specify a CSS setting. You may want to add another class ".fade" that you leave on the object all the time and you can specify your CSS transition settings on that class so they are always in effect.
I don't know a pure css fix for this.
But you can add a different class with a animation that restores to what it was before with JS
const wrapper = document.querySelector(".wrapper");
wrapper.onclick = () => {
if ([...wrapper.classList].includes("loading")) {
wrapper.classList.add("restore");
} else {
wrapper.classList.remove("restore");
}
wrapper.classList.toggle("loading");
};
.wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.wrapper>div {
color: white;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: blue;
animation: none;
transform: scale(1);
transition: transform 500ms ease-out;
}
.wrapper.restore>div {
animation: restore 500ms ease-out;
}
.wrapper.loading>div {
transform: scale(0.2, 0.002);
animation: loading 1000ms 500ms ease-out infinite;
}
#keyframes restore {
0% {
transform: scale(0.2, 0.002);
}
100% {
transform: scale(1);
}
}
#keyframes loading {
0% {
transform: scale(0.2, 0.002)
}
50% {
transform: scale(0.5, 0.002)
}
100% {
transform: scale(0.2, 0.002)
}
}
<div class="wrapper">
<div>click me</div>
</div>
You can use animation iteration count property:
div {
animation-iteration-count: 2;
}
or use fill mode to freeze the animation at the end:
-webkit-animation-fill-mode: forwards;
I'm doing an animation that gets triggered with adding a class to a element. Now on removal of the class I want the animation to go the other way, I figured out to how to reverse the animation, the problem is onload that it triggers it. What can I do to prevent it, what can I change, what am I missing?
the full html/css/js are in the fiddle
here are the good parts,
#keyframes expand {
20% {
opacity: 0;
width: 5rem;
}
70%, 100% {
opacity: 1;
transform: translate(0, 0);
width: 100%;
}
}
#keyframes contract {
0% {
transform: translate(0, 0);
width: 100%;
}
100% {
transform: translate(0, -6rem);
width: 5rem;
}
}
[data-am-button~="buy"] {
margin-bottom: .5rem;
transform: translate(0, -6rem);
width: 5rem;
animation: contract 500ms forwards;
span {
display: none;
}
.is-expanded & {
animation: expand 500ms forwards;
}
}
So instead of putting the animation on the button by default. Add the animation to a .is-contracted class.
Then toggle between these 2 classes when clicking the button. This means that nothing is animated on the page load. Only the button clicking.
CSS changes:
[data-am-button~="buy"] {
margin-bottom: .5rem;
transform: translate(0, -6rem);
width: 5rem;
//animation: contract 500ms forwards; <-- Removed this
span {
display: none;
}
.is-expanded & {
animation: expand 500ms forwards;
}
.is-contracted & {
animation: contract 500ms forwards;// <-- added it to this new class
}
JS changes:
$('.js-expander').on('click', function() {
var $this = $(this);
var $parent = $this.parents('.product-info');
if ( $parent.hasClass('is-expanded') ){
$parent.removeClass('is-expanded')
$parent.addClass('is-contracted')
} else {
$parent.addClass('is-expanded')
$parent.removeClass('is-contracted')
}
});
Here's a fiddle : https://jsfiddle.net/BradChelly/Lugnmmpe/7/
I've got not animated element as default. There's also a trigger that lets me turn on & off animation on that element. The animation itself is very simple: moves element from left to the right and back.
When I stop animation, then my element obviously goes back to initial position. But it goes back suddenly, not smoothly. So it just changes its position from the one when I turned off animation to initial one. My question is: is there a way to stop it smoothly, so when I turn off the animation it goes back to initial position but smoothly/animating.
Here's my element and animation: http://jsfiddle.net/2Lwftq6r/
HTML:
<input type="checkbox" id="anim">
<label for="anim">Start / stop animation</label>
<div></div>
CSS:
div {
margin-top: 50px;
width: 50px; height: 10px;
background: #000;
transform: translateX(0);
}
#anim:checked ~ div {
-webkit-animation: dance 2s infinite ease-in-out;
-moz-animation: dance 2s infinite ease-in-out;
}
#-webkit-keyframes dance {
0%, 100% { -webkit-transform: translateX(0); }
50% { -webkit-transform: translateX(300px); }
}
#-moz-keyframes dance {
0%, 100% { -moz-transform: translateX(0); }
50% { -moz-transform: translateX(300px); }
}
I just had the same problem and I solved it by not using animation and it works perfectly! Check out my solution:
So I had this spatula that I had to move when hovered over only, and I wanted it to transition back smoothly, so this is what I did:
#Spatula:hover{
animation-direction:alternate;
transform: translate(1.2cm,1cm);
transition: all 1.5s;
-webkit-transition: all 1.5s;
}
#Spatula{
-webkit-transition: all 1.5s;
transition: all 1.5s;
}
Good luck!
You can't archive this effect only CSS3 way, but if you really need it, you could use jQuery + CSS3 Transitions. My solution (http://jsfiddle.net/sergdenisov/3jouzkxr/10/):
HTML:
<input type="checkbox" id="anim-input">
<label for="anim-input">Start / stop animation</label>
<div class="anim-div"></div>
CSS:
.anim-div {
margin-top: 50px;
width: 50px;
height: 10px;
background: #000;
}
.anim-div_active {
-webkit-animation: moving 2s ease-in-out infinite alternate;
animation: moving 2s ease-in-out infinite alternate;
}
.anim-div_return {
-webkit-transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
}
#-webkit-keyframes moving {
0% { -webkit-transform: translateX(0); }
100% { -webkit-transform: translateX(300px); }
}
#keyframes moving {
0% { transform: translateX(0); }
100% { transform: translateX(300px); }
}
Javascript:
$('#anim-input').on('change', function() {
var $animDiv = $('.anim-div');
if (this.checked) {
$animDiv.removeClass('anim-div_return')
.addClass('anim-div_active');
return;
}
var transformValue = $animDiv.css('webkitTransform') ||
$animDiv.css('transform');
$animDiv.css({'webkitTransform': transformValue,
'transform': transformValue})
.removeClass('anim-div_active');
requestAnimationFrame(function() {
$animDiv.addClass('anim-div_return')
.css({'webkitTransform': 'translateX(0)',
'transform': 'translateX(0)'});
});
});
P.S.
Vendor prefixes are based on actual browsers list from http://caniuse.com.
Check out This StackOverflow question.
You aren't going to like this answer, but reality is that CSS3
animations aren't really useful to achieve this. To make this work you
would need to replicate a lot of your CSS in your Javascript which
kind of destroys the point (Like for example in this closely related
answer
Change speed of animation CSS3?).
To really make it stop smoothly your best bet would be to write the
animation on a platform like the Greensock animation library
which provides all the tools you need to make it actually smoothly
stop instead of suddenly stop.
There's also another answer below it that does make an effort at using CSS, you can look at that one.
There is also an alternate solution, it might not give you the desired effect of going back to it's original state, but since nobody mentioned it and this problem seems to have no solution, it's possible to pause the animation purely in css, locking it's state until it's started again
To pause the animation you need first to make the animation available even when the checkbox is not checked
And make use of the animation-play-state property
div {
margin-top: 50px;
width: 50px; height: 10px;
background: #000;
animation: dance 2s infinite ease-in-out paused;
}
#anim:checked ~ div {
animation-play-state: running;
}
#keyframes dance {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(300px); }
}
<input type="checkbox" id="anim">
<label for="anim">Start / stop animation</label>
<div></div>