This is making me crazy and I hope that someone can give me a simple solution.
So I have a app on my website that allows you to like or dislike Recipes. When disliking there is an animation sending the image to the left, when liking the animation sends the image to the right (based on the Tinder swiping).
On my laptop everything works fine, but when I load the website on my mobile phone after the left animation is done the page is going back to the top, making me scroll back down every time I like something.
The dislike button works just fine. And if I change the Yes animation to the exact same like the No, it works. So it's really something with that animation.
I think the issue is caused because the image goes out of the screen and it then loads back at the top. But I don't understand why it doesn't happen when going to the left and I can't find a good solution
#keyframes yes {
0% {
transform: scale(1) rotateZ(0deg);
left: 0;
}
30% {
transform: scale(1.05) rotateZ(0deg);
left: 0;
}
100% {
transform: rotateZ(45deg);
left: 400px;
}
}
.animateYes {
animation-fill-mode: both;
animation: yes 0.6s linear;
}
.animateYes:before {
transform: rotateZ(-35deg);
background: url(https://i.imgur.com/Zkwj970.png) no-repeat center 10px;
}
#keyframes no {
0% {
transform: rotateZ(360deg);
right: 0;
}
30% {
transform: scale(1.05) rotateZ(360deg);
right: 0;
}
100% {
transform: rotateZ(315deg);
right: 400px;
}
}
.animateNo {
animation-fill-mode: both;
animation: no 0.6s linear;
}
.animateNo:before {
transform: rotateZ(35deg);
background: url(https://i.imgur.com/XqQZ4KR.png) no-repeat center 10px;
}
This is the website: http://ons-kookboek.atwebpages.com/test.html
I'm a beginner in everything about html and CSS and most of my website is copy paste from the internet without me understanding what it exactly does.
Related
Is there a way to 'movie credits style' scroll down on a webpage with pure CSS ? I'm building a wordpress simple website / webpage and looking for this trick but can't find anything anywhere. For simplicity purpose I'm looking for pure CSS solutions and curious if there's any.
I tried this but it doesn't work
.page-id-39{
animation: scroll-down 2000s linear infinite;
}
#keyframes scroll-down {
0% { transform: translateY(0); }
100% { transform: translateY(100vh); }
}
The (WIP!) page that's supposed to auto scroll down https://wagmigeneration.net/wagmi/
I used this and it works
body {
height: 100%;
margin: 0;
overflow: hidden;
}
body {
animation: scroll-up 1600s linear infinite;
}
#keyframes scroll-up {
from {
transform: translateY(0%);
}
to {
transform: translateY(-100%);
}
}
How can I flip the "font awesome" icon horizontally, and animate it at the same time. I used two classes (fa-flip and fa-bounce), but when I'm putting these together I can only get animation, the receiver is still returned to the left side, it have to be returned to the right
<i class="fas fa-phone fa-flip-horizontal fa-bounce"></i>
So essentially, and by no means said to sound rude, but you'll need to dig in and learn how the animations work if you want to start creating custom stuff outside of the pre-bottled stuff that comes with things like font awesome. I'm not sure I know exactly what you're after but here's a quick proof of concept (pretend div is your icon) to maybe get you in the direction you're after and you can load it on to codepen or something to tinker to fit your needs.
In the future though, some of the folks here can be a bit demanding about showing effort or providing a minimal reproduction of an issue to make a question more concise. Either way hope this helps, cheers!
div {
height: 5rem;
width: 5rem;
background-color: green;
will-change: background-color;
transition: all .25s ease;
animation: flipThenBounce 2s linear;
transform-style: preserve-3d;
}
#keyframes flipThenBounce {
0% {
background-color: red;
}
50% {
transform: rotateY(180deg);
}
80% {
transform: translateY(20px);
}
85% {
transform: translateY(0);
}
90% {
transform: translateY(20px);
}
95% {
transform: translateY(0);
}
100% {
background-color: green;
}
}
<div></div>
Good day,
I am trying to make a nice animation for a website.
It should be relatively simple. So I have drawn a hand and a BMW car key. Used a css code to make it swing and yes it works.
However it is responsive but not in the way I want it to be. I'd like the key to stay in place where it is. However it is moving just about anywhere depending on the screen size.
I could of course use screen size in css. But I don't want to use screen size. I want to be able to place the animation about anywhere where I'd like it to be.
However when resizing the key moves also anywhere where it would like to be :-/
Probably my approach is entirely wrong. But at this point this is what I'd could come up with. Maybe it is right. But I hope that someone could tell me where and how to correct my mistakes.
My HTML code (of course bootstrap and others are linked in the header)
#-webkit-keyframes swinging {
0% {
-webkit-transform: rotate(10deg);
}
50% {
-webkit-transform: rotate(-5deg)
}
100% {
-webkit-transform: rotate(10deg);
}
}
#keyframes swinging {
0% {
transform: rotate(10deg);
}
50% {
transform: rotate(-5deg)
}
100% {
transform: rotate(10deg);
}
}
.swingimage {
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 3.5s ease-in-out forwards infinite;
animation: swinging 3.5s ease-in-out forwards infinite;
}
.key_hand {
/*
background-image: url('arm_hand.png');
background-repeat: no-repeat;
background-size: 100%; */
min-height: 900px;
}
.key_hand>.complete_arm {
position: relative;
width: 100%;
z-index: 2;
}
.key_hand>.bmw_key {
position: relative;
display: inline-block;
top: -390pt;
left: 7%;
z-index: 1;
width: 10%;
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-animation: swinging 3.5s ease-in-out forwards infinite;
animation: swinging 3.5s ease-in-out forwards infinite;
}
<div class="container">
<div class="row">
<div class="col-md-12 key_hand">
<img src="arm_hand.png" class="complete_arm" />
<img src="complete_bmw_key.png" class="bmw_key" />
</div>
</div>
</div>
I have created the following pen. Hoping to shed some light on this case.
https://codepen.io/slalex/pen/GXxMmg
Removing min-height: 900px from .key_hand, and replacing pt by % for the top positioning of .key_hand > .bmw_key, it should be great. Here is the result
Hope it look like what you were waiting for, and bravo for your drawing !
i have a simple CSS animation at the moment where the animation moves the image from top left to bottom right of my banner canvas (300x250) but 50% through i need to start to move towards bottom left and then 100% finish off with moving it back towards the bottom right but as new to css animations not sure how to do this. Does anyone know if this is possible?
Done a little diagram here:
And example:
.train-container {
position: relative;
}
.train {
position: absolute;
top: -350px;
left: -250px;
}
#keyframes moveTrain {
0% {
transform: translate(-185px,-159px);
}
100% {
transform: translate(300px,250px);
}
}
.train-container {
animation-duration: 30s;
animation-fill-mode: forwards;
backface-visibility: hidden;
animation-name: moveTrain;
position: absolute;
}
.train-container {
.train {
transform: scale(0.65);
}
}
When your animation is working so far, all you need to do is to add more keyframes.
Right now you have the keyframes for 0% and 100%. Add 2 more frames with 33% and 66% in between and set their location.
#keyframes moveTrain {
0% {
transform: translate(-185px,-159px);
}
33% {
transform: translate(VALUE, VALUE);
}
66% {
transform: translate(VALUE, VALUE);
}
100% {
transform: translate(300px,250px);
}
}
Just specify the wanted location values in the added keyframes.
You can also use other values for the keyframes than 33% and 66%, and you can also add even more
It appears both IE 10 and Firefox snaps elements to whole pixels when animating their position using translate 2d transform in a css keyframe animation.
Chrome and Safari does not, which looks a lot better when animating subtle movements.
The animation is done the following way:
#keyframes bobbingAnim {
0% {
transform: translate(0px, 0px);
animation-timing-function:ease-in-out
}
50% {
transform: translate(0px, 12px);
animation-timing-function:ease-in-out
}
100% {
transform: translate(0px, 0px);
animation-timing-function:ease-in-out
}
}
Here's an example of what I mean:
http://jsfiddle.net/yZgTM/.
Just open it in Chrome and IE 10 (or Firefox) and you should notice the difference in smoothness of the motion.
I realise there might be many factors affecting this behaviour such as if the element is drawn with hardware acceleration or not.
Does anyone know of a fix to try to force browsers to always draw the elements on subpixels?
I found this similar question, but the answer was to animate using a translate transform, which is exactly what I'm doing:
CSS3 Transitions 'snap to pixel'.
Update:
After playing around a bit I found a fix for Firefox, doesn't do anything in IE 10 though. The trick is to scale down the element ever so slightly and use translate3d with a 1px offset in the Z-axis:
#keyframes bobbingAnim {
0% {
transform: scale(0.999, 0.999) translate3d(0px, 0px, 1px);
animation-timing-function:ease-in-out
}
50% {
transform: scale(0.999, 0.999) translate3d(0px, 12px, 1px);
animation-timing-function:ease-in-out
}
100% {
transform: scale(0.999, 0.999) translate3d(0px, 0px, 1px);
animation-timing-function:ease-in-out
}
}
I love your question!
Good job in noticing the pixel-snap in firefox and IE10.
I've researched this subject a while ago and I advise you to check the GSAP forums, as they contain a lot of useful information on web animations.
Here's a topic regarding IE10 pixel-snap issue.
What you need to do is add a minimal rotation to the element. This is so IE and Firefox will redraw it in a different way - which will stop pixel-snap for good :)
Tyr this:
#keyframes bobbingAnim {
0% {
transform: translate(0px, 0px) rotateZ(0.001deg);
animation-timing-function:ease-in-out
}
50% {
transform: translate(0px, 12px) rotateZ(0.001deg);
animation-timing-function:ease-in-out
}
100% {
transform: translate(0px, 0px) rotateZ(0.001deg);
animation-timing-function:ease-in-out
}
}
#Nemanja is correct you will find that if you tweak the speed you will see better results this is fairly typical with css animations. Also it doesn't really make a difference in this case if you enable hardware acceleration. I tidied up the code a little bit and ran it without any issues, i do not have ie10; However, I have 11. You may have to just remove the second transform of translateZ if it doesn't run in 10
body {
background-color: #ccc;
}
.bobbing {
position: absolute;
animation: bobbingAnim ease-in-out .5s infinite;
-moz-animation: bobbingAnim ease-in-out .5s infinite;
-webkit-animation: bobbingAnim ease-in-out .5s infinite;
}
.bobbing.text {
font-size: 50px;
color: #000;
left: 30px;
top: 30px;
}
.bobbing.image {
left: 30px;
top: 150px;
background: url(http://placehold.it/300x100/aa0000&text=Bobbing+image) 50% 50% no-repeat;
width: 310px;
height: 110px;
}
#keyframes bobbingAnim {
50% {
transform: translate(0, 12px) translateZ(0);
}
}
#-webkit-keyframes bobbingAnim {
50% {
-webkit-transform: translate3d(0, 12px, 0);
}
}
#-moz-keyframes bobbingAnim {
50% {
-moz-transform: translate3d(0, 12px, 0);
}
}
There cant be half a pixel movement, there is no such thing.
Your problem is the speed and smoothness of the animation, not the "pixel snapping".