I have this animation that makes a h1 and p "fly in":
#-moz-keyframes titledrop {
0% {
-moz-transform: translateY(-80px);
}
100% {
-moz-transform: translateY(0);
}
}
#-webkit-keyframes titledrop {
0% {
-webkit-transform: translateY(-80px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes titledrop {
0% {
transform: translateY(-80px);
}
100% {
transform: translateY(0);
}
}
#-moz-keyframes drop2 {
0% {
-moz-transform: translateY(-80px);
}
100% {
-moz-transform: translateY(0);
}
}
#-webkit-keyframes drop2 {
0% {
-webkit-transform: translateY(-80px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes drop2 {
0% {
transform: translateY(-80px);
}
100% {
transform: translateY(0);
}
}
But sometimes the animation starts before the element is visible, so it looks like nothing happened. How can I delay a css animation until the element is visible?
Related
I want to create a floating image transition with CSS and react,same like in Divi theme header images
enter image description here
https://divisupreme.com/features/
Try this:
.floating {
-webkit-animation: movebounce 5s linear infinite;
animation: movebounce 5s linear infinite;
}
#-webkit-keyframes movebounce {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
50% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
#keyframes movebounce {
0% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
50% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
<div className='floating'><img src='YOUR_IMG' alt='' /></div>
I need an arrow to slightly move (bounce) to the bottom right corner on hover, using CSS. I've used the code below and I like what it does however this only moves the arrow left/right. How do I amend it so that it moves slightly to the bottom as well? I've tried using 'translateY' but couldn't workout the exact pixel amount for the animation to be smooth.
I've tried using 'bounce' but actually 'swing' seems to look better.
What I'm looking for is the kind on animation of this page:
http://ianlunn.github.io/Hover/ (called 'Wobble to Bottom Right')
.arrow:hover{
-webkit-animation: swing 1s ease;
animation: swing 1s ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
#-webkit-keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
You have to use translate(x,y) instead of translateX(x) for 2d transformation as #fen1x mentioned in the comment above
Try this:
#keyframes hvr-wobble-to-bottom-right {
16.65% {
-webkit-transform: translate(8px, 8px);
transform: translate(8px, 8px);
}
33.3% {
-webkit-transform: translate(-6px, -6px);
transform: translate(-6px, -6px);
}
49.95% {
-webkit-transform: translate(4px, 4px);
transform: translate(4px, 4px);
}
66.6% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}
83.25% {
-webkit-transform: translate(1px, 1px);
transform: translate(1px, 1px);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
I have used css3 animate for small text to rotate but it wont rotate.
Jsfiddle
<h1 class="title">Coming Soon <small>btw learning</small></h1>
small {
animation:spin 4s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
20% { -webkit-transform: rotate(90deg); }
25% { -webkit-transform: rotate(90deg); }
45% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
70% { -webkit-transform: rotate(270deg); }
75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}
use display:inline-block;
<h1 class="title">Coming Soon <span class="animation">btw learning</span></h1>
.title
{
font-family: 'Cinzel Decorative', cursive;
text-align: center;
font-size: 100px;
margin-top: 25%;
}
.animation {
animation:spin 4s linear infinite;
display:inline-block;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
20% { -webkit-transform: rotate(90deg); }
25% { -webkit-transform: rotate(90deg); }
45% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
70% { -webkit-transform: rotate(270deg); }
75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}
Today i noticed on one of my websites, the footer css was gone. I tried to load the page on mozilla and explorer and it showed up fine. I did not change anything on the css since last month. It just randomly dissapeared on chrome or it doesn't show up anymore.
you can see it for yourself at: http://www.d-dayinfo.org/
I use php so my footer is one single file wich is displayed (included) on all the other pages.
Anyone who have had the same experience with google chrome and would like to help me out?
Really don't know what to do
There is problem on line number 1812 of styles.css
#-webkit-keyframes smallToBig { from-webkit-transform: scale(0.1); }
to { -webkit-transform: scale(1); }
{ }
#-moz-keyframes smallToBig { from-moz-transform: scale(0.1); }
to { -moz-transform: scale(1); }
{ }
#-ms-keyframes smallToBig { from-ms-transform: scale(0.1); }
to { -ms-transform: scale(1); }
{ }
#-webkit-keyframes moveFromBottom { from-webkit-transform: translateY(100%); }
to { -webkit-transform: translateY(0%); }
{ }
#-moz-keyframes moveFromBottom { from-moz-transform: translateY(100%); }
to { -moz-transform: translateY(0%); }
{ }
#-ms-keyframes moveFromBottom { from-ms-transform: translateY(100%); }
to { -ms-transform: translateY(0%); }
{ }
something is wrong here please make this correct its conflict CHROME with CSS chrome
IS should like
#-webkit-keyframes smallToBig {
from{-webkit-transform: scale(0.1); }
to { -webkit-transform: scale(1); }
}
#-moz-keyframes smallToBig {
from{ -moz-transform: scale(0.1); }
to { -moz-transform: scale(1); }
}
#-ms-keyframes smallToBig {
from{ -ms-transform: scale(0.1); }
to { -ms-transform: scale(1); }
}
#-webkit-keyframes moveFromBottom {
from{ -webkit-transform: translateY(100%); }
to { -webkit-transform: translateY(0%); }
}
#-moz-keyframes moveFromBottom {
from{ -moz-transform: translateY(100%); }
to { -moz-transform: translateY(0%); }
}
#-ms-keyframes moveFromBottom {
from{ -ms-transform: translateY(100%); }
to { -ms-transform: translateY(0%); }
}
I am trying to add a slide up from the bottom CSS3 Animation to the <main> element in this site, but the animation is not playing / taking place.
Any idea why?
Here is the link to the page where it is not happening: https://dl.dropboxusercontent.com/u/270523/help/animate/new.html
And here is the CSS for the animation:
.animated{
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
#-webkit-keyframes bounceInUp {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
}
}
#-moz-keyframes bounceInUp {
0% {
opacity: 0;
-moz-transform: translateY(2000px);
}
60% {
opacity: 1;
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px);
}
100% {
-moz-transform: translateY(0);
}
}
#-o-keyframes bounceInUp {
0% {
opacity: 0;
-o-transform: translateY(2000px);
}
60% {
opacity: 1;
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px);
}
100% {
-o-transform: translateY(0);
}
}
#keyframes bounceInUp {
0% {
opacity: 0;
transform: translateY(2000px);
}
60% {
opacity: 1;
transform: translateY(-30px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
On your HTML code, you mistyped here:
<link rel="stylsheet" href="animate.css" type="text/css">
It's "stylesheet" !