I have been reading for hours how to trigger a css element with jquery. I have read many forums on here but nothing is working for me. I am new to coding and trying to do something simple in jquery but cannot figure it out.
Here is my HTML:
<h1 class="Header">
Hello!<div class="wave animate">👋🏽 </div>
</h1>
Here is my CSS:
.wave {
animation-name: wave-animation;
animation-duration: 2.5s;
transform-origin: 70% 70%;
display: inline-block;
}
#keyframes wave-animation {
0% { transform: rotate( 0.0deg) }
10% { transform: rotate(14.0deg) }
20% { transform: rotate(-8.0deg) }
30% { transform: rotate(14.0deg) }
40% { transform: rotate(-4.0deg) }
50% { transform: rotate(10.0deg) }
60% { transform: rotate( 0.0deg) }
100% { transform: rotate( 0.0deg) }
}
I have animated the wave and want to have the animation triggered with a hover. I know this can easily be done in css but am trying for the life of me to do it in java/jquery.
Any help would be greatly appreciated as I feel like I have tried every viable option I have read about. Thanks!
Jquery is not needed here. Just use :hover in your css.
.wave {
display: inline-block;
}
.wave:hover{
animation-name: wave-animation;
animation-duration: 2.5s;
transform-origin: 70% 70%;
}
#keyframes wave-animation {
0% { transform: rotate( 0.0deg) }
10% { transform: rotate(14.0deg) }
20% { transform: rotate(-8.0deg) }
30% { transform: rotate(14.0deg) }
40% { transform: rotate(-4.0deg) }
50% { transform: rotate(10.0deg) }
60% { transform: rotate( 0.0deg) }
100% { transform: rotate( 0.0deg) }
}
<h1 class="Header">
Hello!<div class="wave animate">👋🏽 </div>
</h1>
Related
I have a CSS and JS. Its simply when I slide down to page my logo coming from left with opacity 0. Then when I came back to top again its going back and opacity being 0. Its working on computer and android phones. But on iOS devices its doesn't work. What is wrong with on my code?
Logo is coming after I slide to top it moves to the left but does not disappear. Thank you for responses .
JS:
const handleToggle = (e) => {
let brands = document.getElementsByClassName("stickyBrand"); //Its my logo.
if (e) {
Array.from(brands).forEach((el) => {
el.classList.add("fadeInLeft");
el.classList.remove("fadeOutLeft");
});
} else {
Array.from(brands).forEach((el) => {
el.classList.add("fadeOutLeft");
el.classList.remove("fadeInLeft");
});
}
};
CSS:
#keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-50px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#-webkit-keyframes fadeOutAnimationOperaSafari {
0% {
opacity: 0 !important;
-webkit-transform: translateX(0);
}
100% {
opacity: 1 !important;
-webkit-transform: translateX(-50px);
}
}
#keyframes fadeOutAnimation {
0% {
opacity: 0;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
100% {
opacity: 1;
-webkit-transform: translateX(-50px);
-moz-transform: translateX(-50px);
-o-transform: translateX(-50px);
transform: translateX(-50px);
}
}
You need to add -webkit- prefixes to your transforms. On iOS, all browsers use safari webkit (because they are based on uiwebview), and currently iOS webkit only supports transforms with a prefix. What you are seeing is that the transform is always 0 throughout the animation because the non-prefixed selector is not used.
I have a basic fixed animation on an element that runs when the user click on "space" :
&.pop {
animation: pop 1s ease-in 20ms 1 normal both;
}
#keyframes pop {
0% {
transform: rotate(0deg);
transform-origin: 30px;
}
20% {
transform: rotate(-30deg);
transform-origin: 30px;
}
40% {
transform: rotate(-10deg) translate(-2px, -20px);
transform-origin: 30px;
}
60% {
transform: rotate(0deg) translate(0, -40px);
transform-origin: 30px;
}
80% {
transform: rotate(3deg) translate(2px, -20px);
transform-origin: 30px;
}
100% {
transform:translate(0,0);
transform-origin: 30px;
}
}
Now, i want to add different other transform animations onkeydown that will run simultaneously with the current animation, for example :
&.spin {
animation: spin 500ms ease-out 20ms 1 forwards;
}
#keyframes spin {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(180deg);
}
}
So my problam is that when i am adding the second "spin" class, it runs over my first "pop" animation.
what will be the way to add it instead of running over ?
if i understood your question correctly:
you can use multiple animations within the transform :
just like this :
transform: rotate(90deg) translate(150px, -230px);
or you can use another approach:
you can wrap your target element with two outer divs and assign an animation for every div..
just like this
<div class="apply_this_animation">
<div class="apply_this_animation_also">
<img src="https://via.placeholder.com/300x300" alt="#" />
</div>
</div>
and use this in you CSS just like this:
<style>
.apply_this_animation {
transform: rotate(90deg);
}
.apply_this_animation_also {
transform: translate(150px, -230px);
}
</style>
Read More
I have a problem with the animated text on my website. I am using the following CSS to do the animations:
#-webkit-keyframes fadeInRightBig {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
#-moz-keyframes fadeInRightBig {
0% {
opacity: 0;
-moz-transform: translateX(2000px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
#-o-keyframes fadeInRightBig {
0% {
opacity: 0;
-o-transform: translateX(2000px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
#keyframes fadeInRightBig {
0% {
opacity: 0;
transform: translateX(2000px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRightBig {
-webkit-animation-name: fadeInRightBig;
-moz-animation-name: fadeInRightBig;
-o-animation-name: fadeInRightBig;
animation-name: fadeInRightBig;
}
When .fadeInRightBig is applied to a text element it becomes blurry in Chrome as seen in the following picture. The first element has not the animation applied. Maybe it is a little hard to see due to the resizing of the image.
As far as i know this problem only exists in Chrome. In Firefox and IE the animated text is crisp.
I have tried to recreate the problem in a Fiddle (http://jsfiddle.net/DTcHh/2608/). However in this Fiddle it does not seem to be a problem.
My website is located here: http://steffanlildholdt.dk/.
Anyone having idea to what the problem can be?
On the elements that appear blurred, apply the following styles:
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
I'm trying to learn more about front end web dev and trying to see the page sources of different cool elements i find on the web. I came across this and was trying to understand how they did the css for the countdown. I only understand parts of the html and I've found where they keep the example:
<div class="countdown-container" id="main-example">
it would be much clearer if i was able to reproduce it in jsfiddle but i can't. Any insight is appreciated.
To achieve this "flip-down" effect you can use css animations or transitions.
Here's a quick look at how to do it with css animations(minus the styling). Transitions will work similarly, but will require a change in state(such as :hover).
#-webkit-keyframes flip-top {
0% {
transform: rotateX(0deg);
transform-origin: 50% 100%;
}
50% {
transform: rotateX(-90deg);
}
100% {
transform: rotateX(-90deg);
transform-origin: 50% 100%;
}
}
#-webkit-keyframes flip-bottom {
0% {
transform: rotateX(-90deg);
transform-origin: 100% 0%;
}
50% {
transform: rotateX(-90deg);
}
100% {
transform: rotateX(0deg);
transform-origin: 100% 0%;
}
}.top.curr {
z-index: 1;
-webkit-animation: flip-top 2s ease-in infinite;
}
.top.next {
z-index: 0;
}
.bottom.curr {
z-index: 0;
}
.bottom.next {
z-index: 1;
-webkit-animation: flip-bottom 2s ease-out infinite;
}
Here's an example to play around with: plnkr
note: I only prefixed for chrome, so you should open it with chrome or add additional prefixes.
I am doing some tests in order to later animate a website and i want to be able to make a button bounce when its clicked on however i cannot seem to get it to work. THe animation for the heading works fine on page load.
This is my entire code
<head>
<script>
function click(test){
test.style.webkitAnimationName = 'bounce';
test.style.webkitAnimationDuration = '3s';
setTimeout(function() {
test.style.webkitAnimationName = '';
}, 4000);
}
</script>
<style>
h1 {
-webkit-animation-duration: 3s;
-webkit-animation-name: slidein;
}
#-webkit-keyframes slidein {
0% {
margin-left: 100%;
width: 300%;
}
100%{
margin-left: 0%;
width: 100%;
}
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
</style>
<title>Success message</title>
</head>
<body>
<H1> You entered all the data required </H1>
<button onclick="click(this)">amg4aeorg;ji</button>
</body>
can someone please tell me why it isn't working, thank you in advance
EDIT
Ive done some testing and found out the the javascript function isn't actually running, anybody know why? thx
Make a CSS class to wrap the animation, then add that CSS class name to the element.
test.setAttribute('class','bounceThis');
CSS:
.bounceThis {
-webkit-animation: bounce 3s ease-out;
-moz-animation: bounce 3s ease-out;
animation: bounce 3s ease-out;
}
#-webkit-keyframes bounce { ... etc.... }