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.... }
Related
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 can't seem to get the images to spin as I wanted. I believe there's trouble with the image classes but I keep trying and failing to make the animation function.
Here's a part of my code. I only included the code that was relevant to the question:
img: hover {
cursor: default;
transform: rotate(360deg);
transition: all 0.3s ease-in-out 0s;
}
img: nth-child (1) {
animation-name: spin;
animation-duration: 4s;
animation-iteration-count: 3;
}
#keyframes spin {
from {transform: rotate(0deg);
}
to {transform: rotate(360deg);
}}
</style>
<body>
<header>My Tutorial 3</header>
<img class = "as" src="as.png" />
<article><header>About this tutorial</header>
In this tutorial I need to make a picture spin for ever...
<img src="a2.png" /></article>
<footer>my footer
<img src="a3.png" /></footer>
<div class="ribbon">My Tutorial 3</div>
</body>
</html>
Your source is rather broken. Try something like this:
<style type="text/css">
img:hover {
transform: rotate(360deg);
transition: all 0.3s ease-in-out 0s;
}
#spin {
animation-name: spin;
animation-duration: 4s;
animation-iteration-count: 3;
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
<p><img src="spin.png" id="spin"></p>
<p><img src="spin.jpg"></p>
The img with id="spin" gets the anim, whereas the other flips only on hover. Careful with nth-of-type! Except Firefox there's little support for this.
Pseudo selectors shouldn't have spaces between the : and the name.
Instead of img: hover, you should use img:hover
Demo: https://jsfiddle.net/webtiki/62RJc/
My jquery/js code is not waiting for images loaded to fade out. What is the problem?
$('#entry').css('background-image','url(../img/backg3.jpg)').waitForImages(function() {
$('#load').fadeOut(1000);
$('.spinner').fadeOut(1000);
});
/*******************
Loading
*********************/
#load {
position:absolute;
height:100vh;
width:100vw;
background-color:#ddd;
z-index:1000;
/*-moz-transition:all 2s ease-out;
-webkit-transition:all 2s ease-out;
-webkit-transition:all 2s ease-out;
transition:all 2s ease-out;*/
}
#-o-keyframes spin {
100%{
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes spin {
100%{
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin {
100%{
transform: rotate(360deg);
}
}
.spinner {
position:absolute;
top:45vh;
left:45vw;
width:5vh;
height:5vh;
border: 6px solid #F90;
border-left-color:#FC3;
border-bottom-color:#FF6;
border-right-color:transparent;
border-radius:100%;
animation: spin 400ms infinite linear;
margin: auto;
}
<div id="load">
<div class="spinner"></div>
</div>
So I want while my background image is loading to hold the spinner, but it fade outs without image.
Page - http://sarosacramento.com/
Plugin - https://github.com/alexanderdickson/waitForImages
From their github page, it looks like you're supposed to apply .waitForImages() to an element selector (which either has image children or images in its CSS). In your code, instead of applying it to the selector, you're first adding CSS, then trying to apply .waitForImage(), which won't work, since the .css() doesn't return a selector. Try instead:
$('#entry').waitForImages(function () {
$('#load').fadeOut(1000);
$('.spinner').fadeOut(1000);
});
for the JS and just put the background image in normal CSS:
#entry {
background-image: url(../img/backg3.jpg);
}
(If you must set it via JS, do that before applying .waitForImages() to $("entry"):
$('#entry').css('background-image','url(../img/backg3.jpg)');
$('#entry').waitForImages(function () { ...
though I haven't actually tested this.)
Here's an example: http://jsfiddle.net/aq9t6kvk/2/. (It mostly uses your code, but I used some different images that wouldn't be in our caches already. But since the first one might already be loading while JSFiddle is "initializing the awesome", there are some backups for subsequent "Run"s.)
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've been trying to learn css animations and I'm starting to get a grip on them but I'm having an issue an animation effect. I have an animation class assigned to a section that is a download button when I click it the animation plays for the extent of the click, if i click and hold it plays the whole animation. I want the animation to play all the way through on on click, not a click and hold.
Heres the Html section the class is applied to:
<a href="software/ASC.exe">
<section id="download" class="animated" title="Download ASC">
Download
</section>
</a>
Here is the CSS animation class:
.animated {
}
.animated:active {
-webkit-animation:fadeOutUp 2s;
-moz-animation:fadeOutUp 2s;
-o-animation:fadeOutUp 2s;
-ms-animation:fadeOutUp 2s;
animation:fadeOutUp 2s;
box-shadow:3px 1px 20px 4px #0099CC;
}
#-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
}
#-moz-keyframes fadeOutUp {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(-20px);
}
}
#-o-keyframes fadeOutUp {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(-20px);
}
}
#keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-o-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
Any help is appreciated!
HTML
<a href="#" id="buttonLink">
<section id="download" class="animated" title="Download ASC">
Download
</section>
</a>
CSS
.clicked {
-webkit-animation:fadeOutUp 2s;
-moz-animation:fadeOutUp 2s;
-o-animation:fadeOutUp 2s;
-ms-animation:fadeOutUp 2s;
animation:fadeOutUp 2s;
box-shadow:3px 1px 20px 4px #0099CC;
}
JavaScript
var el = document.getElementById('buttonLink');
el.addEventListener('click', function(){
document.getElementById('download').className = 'clicked';
})
DEMO
You could do it with jQuery
DEMO http://jsfiddle.net/kevinPHPkevin/Uj5gC/1/
$("#download").click(function () {
$(this).addClass("animated1");
});
To reset the animation just remove the class after 2 seconds
DEMO http://jsfiddle.net/kevinPHPkevin/Uj5gC/4/
$("#download").click(function () {
$(this).addClass("animated1");
setInterval(function () {
$("#download").removeClass("animated1");
}, 2000);
});
** EDITED**
Just for the challenge, here's a CSS only option using :target
DEMO http://jsfiddle.net/kevinPHPkevin/Uj5gC/2/
A demo that uses javascript to add that 'animated' class. Anyone knows a way to do that from CSS (kinda' impossible though :D)? It'd be interesting. Plunk here http://plnkr.co/edit/IhkmgKQ9Od0dyb3HFuEv?p=preview
window.onload = function() {
var btn = document.getElementById("download");
btn.addEventListener("click", function(e) {
this.className = "animated";
});
}
You can archieve this in pure CSS by using :not(:active) instead of just .active.