I have a Button inside a div in which the tick mark appears as we click. The tick mark is added using after pseudo class. But the things looks choppy in browsers (Chrome and Safari) of iOS devices where the animation appears to be stopped and resumes after sometime.The div outside that contains button also has :active pseduo class which transforms it.
//outer div contains the button
div:active {
transform: scale(0.95);
}
// add tick with after pseudo class
.draw:after {
height: 60px;
width: 30px
content: '';
left: 14px;
top: 42px;
position: absolute;
transform-origin: left top;
animation-duration: 300 ms; // animation duration applied it
transform: scaleX(-1) rotate(120deg); // transform applied for the tick mark
animation-name: animate-tick;
}
// keyframes for animation
// animation height and width applied
#keyframes animate-tick {
0% {
height: 0; width: 0;
}
40% {
height: 0px; width: 30px;
}
100% {
height: 60px; width: 30px;
}
}
Have you added #-webkit-keyframes?
Create a named set of keyframes in CSS using the #-webkit-keyframes rule. The set must include at least one keyframe.
Set the -webkit-animation-duration property to a positive, nonzero value.
Set the -webkit-animation-name property to the name of the set of keyframes.
Related
Please can you help troubleshoot the transition in this CSS? My browser can see the code in the inspector but no transition is taking place. I have tried operating the transition on different properties including width and position but nothing works.
#header-image {
position: absolute;
top: 30px;
right: 30px;
background: transparent;
width: 250px;
margin-left: 10px;
opacity: 1;
transition: opacity 2s linear 1s;
}
I know I'm probably being thick so apologies in advance.
In order for the transition to work.. the property value should change. only then it will trigger the transition.
i.e) lets say #header-image initially has opacity: 0; width: 50px;.
but when you hover it you want to increase the opacity and width opacity: 1; width: 250px;
so your css will look like..
#header-image {
position: absolute;
top: 30px;
left: 30px;
background: blue;
width: 100px;
height: 100px;
margin-left: 10px;
animation: fadeIn 2s linear;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="header-image"></div>
Then your transition will work. So basically transition will work only when there is a change in the value. But in your case you are setting the opacity:1 initially by default.
If you want to add this effect on page load then you have to use css animation or javascript. Below I have given an example snippet on how it can be achieved using css animation.
However if you are planning to use many animations then I recommend to use some popular libraries like Animista, Animate.css, wow.js
I want to have an element slide in a few seconds after each slide on my CSS slider. The animation is currently only happens on the first slide. Is what I'm trying to do even possible?
keyframes top {
from { top: 0; right: -250px; }
to { top: 0; right: 100px; }
}
.top {
animation-duration: 2s;
animation-name: top;
}
Here's full demo of what I have:
https://jsfiddle.net/tekgirl/zcm2w6e1/
P.S. I'd like the element to stay at 100px mark instead of bumping all the way to the left.
I have a menu system where that when a ‘menu’ button is clicked some simple javascript allows a mobile menu to be shown as a drop-down.
I would like to have it so this menu transitions / animates in, but the display: none property seems to not be animatable with CSS animations. I don’t really want to just use opacity: 0 because the mobile menu will then be in the document flow, and on desktop devices I don’t wish this to be the case.
Is there any CSS solution to this? When I use the Greensock animation library, it allows you to animate or change the ‘display’ property. I can’t seem to get this to work with CSS animations though?
I’ve created a simple pen where I’ve just used a single div that animates (to keep it simple I haven't included any JS click events etc with this).
As you can see I’ve commented out the display: none on both the CSS for the id#bluebox and on the #keyframes animation. If you un-comment these you can see the problem that is created.
https://codepen.io/emilychews/pen/xPWddZ
CSS
#bluebox {
margin-left: 0px;
margin-top: 0px;
width: 100px;
height: 100px;
background: blue;
animation: appear 1s ease-in forwards;
opacity: 0;
/* display: none; */
}
#keyframes appear {
0% {/*display: none;*/ opacity: 0}
1% {display: block; opacity: 0.1;}
100% {opacity: 1;}
}
HTML
<div id="bluebox"></div>
I solved this by adding a transform: scaleY(0) to the element, and then animated this with the element on opacity: 0 for the first 1% of the animation, so you couldn't see the element 'scale up' so to speak. I used scale instead of width and height because width and height properties don't animate very well in terms of achieving the 60fps smoothness.
CSS
#bluebox {
margin-left: 0px;
margin-top: 0px;
width: 100px;
height: 100px;
background: blue;
animation: appear 1s ease-in forwards;
opacity: 0;
transform: scaleY(0);
}
#keyframes appear {
0% {opacity: 0;}
1% {opacity: 0; transform: scaleY(1)}
100% {opacity: 1; transform: scaleY(1)}
}
In this case, since you're attempting to animate the element, I would say you should probably use width and height to your advantage instead.
Something like this could act as a substitute for display none. (Codepen)
#bluebox {
width: 0px;
height: 0px;
}
#keyframes appear {
0% {
width: 0px;
height: 0px;
}
100% {
width: 100px;
height: 100px;
}
}
The width or height could also be replaced with your end width/height to allow for a more natural animation, depending on your goal. I can update the Codepen to include an example of what I mean if you'd like.
Let me know if this is what you were aiming for!
Edit: Fixed the Codepen link
Show display pop-ups for some second & after some second it will be automatically hidden.
Is there any way in CSS?
I don't want in javascript.
You can use CSS animations to achieve this.
.popup {
/* apply 3 second hiding animation after 10 second delay */
animation: hide 3s 10s forwards;
/* fix popup at the center of screen, optional style */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
/* dimming entire screen except popup */
outline: 100vmax solid #ccc;
}
#keyframes hide {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
<div class="popup">
This is popup
</div>
I've developed an animation in which a div grows by using the following styles:
.animation-start {
overflow: hidden;
height: 0;
}
.animation-end {
height: 100px;
}
But the problem with this approach is that it is not rendered smoothly on mobile devices. At the moment the only animations rendered smoothly on mobiles are the ones that use transform property. Is there any way to achive growing div animation with solely transform properties (without using height property)?
Yes, you can just add a duration to the element:
$(document).click(function(){
$('div').toggleClass('animation-end');
});
div {
background: #ffc;
transition-duration: 300ms;
}
.animation-start {
overflow: hidden;
height: 0;
}
.animation-end {
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="animation-start">asdf</div>
click anywhere
A transition and transform property should be able to handle this for you
transition: all 0.5s ease;
transform: scale(2);
// Or individually target the axis you want to scale
transform: scaleX(2);
transform: scaleY(2);
Scale works as a multiplier but I'm not sure if you need a fixed pixel height