There is example of animation:
.b-ball_bounce {transform-origin: top;}
#-webkit-keyframes ball_animation {
20% {transform: rotate(-9deg);}
40% {transform: rotate(6deg);}
60% {transform: rotate(-3deg);}
80% {transform: rotate(1.5deg);}
100% {transform: rotate(0deg);}
}
.b-ball_bounce:hover {
-webkit-animation: ball_animation 1.5s;
animation-iteration-count: 1;
}
When mouse hover an element animation start. But when mouse leave, animation stops immediately. But I want to finish animation after mouse leave.
This is example with help of JavaScript: http://codepen.io/Profesor08/pen/pvbzjX
And I want to do the same with pure CSS3, there is how it looks now: http://codepen.io/Profesor08/pen/WbxeoW
You can do a lot of stuff with transition:
#some-div {
background-color: rgba(100,100,0,0.2);
transition: background-color 0.5s ease;
}
#some-div:hover { background-color: rgba(100,0,0,0.7); }
Look at the JSfiddle or look here for more
CSS might help in some cases but not all, below is the code that will animate letter spacing on both hover and after hover.
h1
{
-webkit-transition:all 0.3s ease;
}
h1:hover
{
-webkit-transition:all 0.3s ease;
letter-spacing:3px;
}
<body>
<h1>Hello</h1>
</body>
To achieve this we can use javascript to append the CSS class "onMouseEnter" and remove the class "onAnimationEnd" and completly remove the :hover tag from our css.
React example:
onMouseEnter={(e) => e.currentTarget.classList.add('bounce') }
onAnimationEnd={(e) => e.currentTarget.classList.remove('bounce')}
Working Example: https://codepen.io/jamesprenticez/pen/jOpQvPP
Related
With code below, when tapping the sample element, the sample will go big and then go small, it's nice.
But the question is, when I tap the sample element twice, the effect will only show once.
I know that's because the sample element is still focused, so the animation is not triggered.
I want to solve this with just css, what should I do?
.sample:hover, .sample:focus {
animation: phoneButtonEffect 0.2s linear;
}
#keyframes phoneButtonEffect {
50% {
transform: scale(1.1)
}
100% {
transform: scale(1)
}
}
That can be achieved with the :active pseudo class.
Take a look at this:
.sample{
height: 10em;
width: 10em;
background-color: red;
transition: all .2s ease-in-out;
}
.sample:active {
transform: scale(1.1);
transition: .1s;
}
<div class="sample">
</div>
The first .2s value is the that the transition will take to be back to normal and the second value .1s in the :active selector, is the time that the .sample element will take the reach the desired state, in this case, scale(1.1).
I am trying to build a class that I can easily slap onto an element that would fade the element into view when it is rendered but instantly hide it when I set display to none.
So far, the classes Ive build fade the element into view, but there is a slight delay on hiding OR the element fade-hides as well.
I have this so far using animations for the class fadeIn:
#keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fadeIn {
animation: fadeIn 0.2s both ease-in;
}
This one fades-in but there is a delay when hiding it
Another one looks like this:
.fade-show {
opacity: 1;
transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-webkit-transition: opacity 2s ease-in;
}
This doesnt actually fade-in and delays on hide.
I would just like something to fade when rendered or display set to block but instantly hide when display set to none.
Usage for this class would be as follows:
<div class="fadeIn" >I fade in but dont fade on hide</div>
Enjoy :)
You have also this library of animations, it's very nice and simply to use!
Animate.css https://daneden.github.io/animate.css/
.fadeMe {
animation:fadeIn 1s linear;
}
#keyframes fadeIn {
0% {
opacity:0
}
100% {
opacity:1;
}
}
.fadeMe.none {
display:none
}
<div class="fadeMe">Fade in (try to add none after the class?)</div>
You don't need to use KeyFrames to achieve this.
Set the initial opacity of the element to 0.
Add a class (.show) to the element which sets the opacity to 1 and adds the transition attributes.
Note, if you were to add the transitions to the 'div' CSS selector instead of the .show class then it would fade in AND out.
Add/remove the .show class to show/hide the element.
HTML:
<div class="show" >I fade in but dont fade on hide</div>
CSS:
div {
opacity: 0;
}
.show {
opacity: 1;
transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-webkit-transition: opacity 2s ease-in;
}
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>
I have used a CSS3 effect where the black box scales to 0.25 to the top-left corner on a mouse hover.
The problem I face here is that once hovered, the animation starts and if the mouse pointer is still within range of the black box (and get hovered), the animation again restarts from the existing point. This prevents a smooth transition. How can this be solved?
This link contains the black box
Below is the code. Note that the black box is wrapped in the CSS clas 'image-effect'.
.image-effect {
animation-name: slideUp;
transition: all 0.5s;
-webkit-animation-name: slideUp;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
}
.image-effect:hover {
transform: scale(0.25) ;
transform-origin: top left;
overflow: hidden;
}
Thanks in advance.
You need to add a parent element that contains the hover, but does not transform. Your CSS would end up looking something like this:
.parent-element:hover .image-effect {
transform: scale(0.25) ;
transform-origin: top left;
overflow: hidden;
}
Check out this fiddle http://jsfiddle.net/7wdqmhrd/
Target an inner div element with the effect instead like the following :
.image-effect div {
animation-name: slideUp;
transition: all 0.5s;
-webkit-animation-name: slideUp;
animation-duration: 1s;
-webkit-animation-duration: 1s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
}
.image-effect:hover div {
transform: scale(0.25);
transform-origin: top left;
overflow: hidden;
}
Hope it helps!
1) Add an inner div tag
<div class="image-effect">
<div> // Beginning Tag Added
<img class="size-full wp-image-225 alignleft" src="http://albion123.byethost7.com/creative/wp-content/uploads/2015/01/bg11.png" alt="bg1" data-id="225">
</div> // Ending Tag Added
</div>
2) Just add a div tag to both your classes
.image-effect div
.image-effect:hover div
Because you are wanting to move the inner div.
This is my first try with css3 animation. I'm trying to create a letter spacing animation in which the letters are closely spaced at first and then letter spacing increases. So far I've found a code which allows the spacing to happen on hover. How can I remove the hover and make the animation when the page opens.
Heres the fiddle http://jsfiddle.net/Lventbau/
and the code
p {
letter-spacing:-2px;
-webkit-transition: letter-spacing, 1s;
-moz-transition: letter-spacing, 1s;
-o-transition: letter-spacing, 1s;
transition: letter-spacing, 1s;
}
p:hover {letter-spacing:2px;}
You can accomplish it with css3 animations jsfiddle :
p {
letter-spacing:2px;
-webkit-animation: myanim 1s;
animation: myanim 1s;
}
#-webkit-keyframes myanim {
0% { letter-spacing: -2px; }
100% { letter-spacing:2px; }
}
#keyframes myanim {
0% { letter-spacing: -2px; }
100% { letter-spacing:2px; }
}
You can find animation documentation here