I have just added 'animation-delay' to my code so that content slides from offscreen only after 5 seconds. However, I am finding that the content being moved shows in the 'final' position while the 'delay' is running, then after 5 seconds the contents slides in from the left (as required).
Does anybody know how I can adapt my code so that the content isn't initially visible in the final location? Here is a stripped down version of my code:
<style>
div {
width:100px;
height:100px;
background-color:red;
-webkit-animation: slideFromLeft 3500ms ease-out;
-moz-animation: slideFromLeft 3500ms ease-out;
-ms-animation: slideFromLeft 3500ms ease-out;
animation-delay:5s;
-webkit-animation-delay:5s; /* Safari and Chrome */
}
#-webkit-keyframes slideFromLeft {
from {
opacity: 1;
-webkit-transform: translateX(-100%);
}
to {
opacity: 1;
-webkit-transform: translateX(0%);
}
}
#-moz-keyframes slideFromLeft {
from {
opacity: 1;
-moz-transform: translateX(-100%);
}
to {
opacity: 1;
-moz-transform: translateX(0%);
}
}
#-ms-keyframes slideFromLeft {
from {
opacity: 1;
-ms-transform: translateX(-100%);
}
to {
opacity: 1;
-ms-transform: translateX(0%);
}
}
</style>
<body>
<div>
Add opacity:0 to the css for the initial div. That way it is invisible until the animation sets in.
Additionally, add animation-fill-mode: forwards; so it keeps the endstate.
http://jsfiddle.net/L29rW/1/
Related
I have a slideshow of 4 images, while page loading animation should fade to left and then to pause.
The following code works in Chrome, Safari and Firefox, but not in IE.
Any help would be appreciated!
HTML:
<div class="teaser-large image-loaded">
<img src="image_01.jpg" />
</div>
CSS3:
#keyframes fadeLeft {
from {
transform: translate3d(-3%,0,0);
-webkit-transform: translate3d(-3%,0,0);
-moz-transform: translate3d(-3%,0,0);
-ms-transform: translate3d(-3%,0,0);
opacity: 0;
}
to {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
opacity: 1;
}
}
.teaser-large {
opacity: 0;
-webkit-animation: fadeLeft 700ms ease-in-out;
animation: fadeLeft 700ms ease-in-out;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.image-loaded {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
I am working in sass files. i have a problem related mixins. i creating a mix-ins for key frames and i have no idea how to create. i have added my code below. please review my code and please create a mix-ins for this. if i copy this code in directly in complied css file then css file automatically remove these key frames.I am working in sass files. i have a problem related mixins. i creating a mix-ins for key frames and i have no idea how to create. i have added my code below. please review my code and please create a mix-ins for this. if i copy this code in directly in complied css file then css file automatically remove these key frames.
.heart-beat {
position: absolute;
top: 50px;
left: 50px;
height: 25px;
width: 25px;
z-index: 10;
border: 5px solid #ef5350;
border-radius: 70px;
-moz-animation: heartbit 1s ease-out;
-moz-animation-iteration-count: infinite;
-o-animation: heartbit 1s ease-out;
-o-animation-iteration-count: infinite;
-webkit-animation: heartbit 1s ease-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#-moz-keyframes heartbit {
0% {
-moz-transform: scale(0);
opacity: 0.0; }
25% {
-moz-transform: scale(0.1);
opacity: 0.1; }
50% {
-moz-transform: scale(0.5);
opacity: 0.3; }
75% {
-moz-transform: scale(0.8);
opacity: 0.5; }
100% {
-moz-transform: scale(1);
opacity: 0.0; }
}
#-webkit-keyframes heartbit {
0% {
-webkit-transform: scale(0);
opacity: 0.0; }
25% {
-webkit-transform: scale(0.1);
opacity: 0.1; }
50% {
-webkit-transform: scale(0.5);
opacity: 0.3; }
75% {
-webkit-transform: scale(0.8);
opacity: 0.5; }
100% {
-webkit-transform: scale(1);
opacity: 0.0; }
}
Here is the example of the mixin.This may help you.
Where keyframe() is used to call the keyframe prefix, then prefixed() is used for transform property.
To see the compile code please use SASS Meister online tool
// This is for iterating `Keyframes`
#include keyframes(heartbit){
// This is for iterating `transform`
#include prefixed(transform, scale(0.1);
}
Note: You need to declare this below the mixin.
// Mixin
// prefix declarations
#mixin prefixed($property, $value) {
-webkit-#{$property}: #{$value};
-moz-#{$property}: #{$value};
-ms-#{$property}: #{$value};
-o-#{$property}: #{$value};
#{$property}: #{$value};
}
// prefix keyframes
#mixin keyframes($name) {
#-webkit-keyframes #{$name} {
#content;
}
#-moz-keyframes #{$name} {
#content;
}
#-ms-keyframes #{$name} {
#content;
}
#-o-keyframes #{$name} {
#content;
}
#keyframes #{$name} {
#content;
}
}
It's an issue with the circular flag icon in the screenshot below. I want it to rotate 45 degrees clockwise and keep it rotated in + shape as long as the cursor is hovering on the image; then rotate back ccw when the cursor leaves the image.
This is the code I wrote so far. When hovering the image rotates 45' cw correctly but it goes back to X shape immediately.
#icon{
display: inline-block;
margin: 0 auto 0 0;
width: 2.4em;
height: 2.4em;
}
#icon:hover{
-webkit-animation:cw 0.4s linear 1;
-moz-animation:cw 0.4s linear 1;
animation:cw 0.4s linear 1;
}
#-moz-keyframes cw { 100% { -moz-transform: rotate(45deg); } }
#-webkit-keyframes cw { 100% { -webkit-transform: rotate(45deg); } }
#keyframes cw { 100% { -webkit-transform: rotate(45deg); transform:rotate(45deg); } }
#-moz-keyframes ccw { 100% { -moz-transform: rotate(-45deg); } }
#-webkit-keyframes ccw { 100% { -webkit-transform: rotate(-45deg); } }
#keyframes ccw { 100% { -webkit-transform: rotate(-45deg); transform:rotate(-45deg); } }
So how can I solve this problem? I think the #icon should be modified a bit because it might keep its original state even after rotation.
Use a transition instead of an keyframes animation:
img {
transition: all .2s ease;
transform: rotate(0deg)
}
img:hover {
transform: rotate(45deg)
}
<img src="https://placehold.it/100x100">
Try using animation-fill-mode: forwards;
or use animation:cw 0.4s linear 1 forwards;
I am running into problems with getting cross-browser animation of a ball on a webpage I am developing.
The football starts off hovering when the user arrives on the webpage. When the user scrolls and the football hits the top of the screen, using Jquery Waypoints, I remove the hovering animation and add the spinning, translating animation so that the football moves diagonally(spinning) down the page to the next section. In Firefox, the ball hovers perfectly and in Chrome the ball doesn't hover at all. When the element hits the top of the page in Chrome the ball rotates and translates however in Firefox the ball does not rotate and only translates.
The HTML:
<div id="footy">
<img id="kick" class="object footy float" src="<?php echo drupal_get_path('theme', 'footykids'); ?>/bootstrap/img/footy.png">
</div>
The CSS:
.footy {
z-index: 1999;
width: 150px;
height: auto;
}
.drop-punt {
transform: translate(360px, 360px) rotate(-360deg);
-webkit-transform: translate(360px, 360px) rotate(-360deg);
-o-transform: translate(360px, 360px) rotate(-360deg);
-moz-transform: translate(360px, 360px) rotate(-360deg);
}
.object {
position: absolute;
transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
-moz-transition: all 2s ease-in-out; /** Firefox **/
-o-transition: all 2s ease-in-out; /** Opera **/
}
.float {
animation: floating 2s infinite linear;
-webkit-animation: floating 2s infinite linear;
-moz-animation: floating 2s infinite linear;
-ms-animation: floating 2s infinite linear;
-o-animation: floating 2s infinite linear;
}
#-webkit-keyframes floating{
0% {
transform: translate(0px, -10px);
}
50% {
transform: translate(0px, 10px);
}
100% {
transform: translate(0px, -10px);
}
}
#-moz-keyframes floating{
...
}
#-ms-keyframes floating{
...
}
#-o-keyframes floating{
...
}
#keyframes floating{
...
}
JQuery using Waypoints:
( function ($) {
$( document ).ready( function() {
$('#kick').waypoint(function() {
$("#kick").removeClass("float");
$("#kick").addClass("drop-punt");
});
});
});
(jQuery);
The webkit animation can be fixed by changing the keyframes to:
#-webkit-keyframes floating{
0% { -webkit-transform: translate(0px, -10px); }
50% { -webkit-transform: translate(0px, 10px); }
100% { -webkit-transform: translate(0px, -10px); }
}
The Firefox issue can be fixed by adding a rotation to the keyframes:
#-moz-keyframes floating{
0% { -moz-transform: translate(0px, -10px) rotate(0deg); }
50% { -moz-transform: translate(0px, 10px) rotate(0deg); }
100% { -moz-transform: translate(0px, -10px) rotate(0deg); }
}
Demo fiddle
Is there a way to slow down a hover effect? I have a hover effect on my site (removed) that displays text on hover of the images. I want to slow down the effect by a little. It's a tad jarring how quickly the picture switches over.
How would I do that?
You could add css3 transitions:
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
It depends on how you're displaying the text. If you're changing a CSS property you can do this with CSS3 transitions. Below is an example.
HTML:
<div id="A"></div><div id="B"></div>
CSS:
div {
height: 100px;
width: 100px;
position: absolute;
top: 0;
left: 0;
-moz-transition: opacity 4s; /* Firefox */
-webkit-transition: opacity 4s; /* Safari and Chrome */
-o-transition: opacity 4s; /* Opera */
transition: opacity 4s;
}
#A {
background: red;
opacity: 1;
z-index: 1;
}
#B {
background: blue;
opacity: 0;
z-index: 2;
}
#B:hover {
opacity: 1;
}
Demo
Edit: David Thomas has told me that you cannot change the display with transitions. I have updated the above to use opacity.
I know this is quite a bit late but look into CSS3 animations. I use an animation on one of my Garry's Mod loading screens.
/* Styles go here */
button {
margin-left: 50%;
margin-right: 50%;
}
button:hover {
-webkit-animation: breathing 5s ease-out infinite normal;
animation: breathing 5s ease-out infinite normal;
}
#-webkit-keyframes breathing {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes breathing {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
50% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
75% {
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<p>Below I have a button that changes size on mouse hover useing CSS3</p>
<button>Hover over me!</button>
</body>
</html>
I know it's not quite the result your looking for but I'm sure you and others can find this useful.
If you'd like, you could use jQuery .fadeIn() http://api.jquery.com/fadeIn/
.fadeIn( [duration] [, callback] )
duration string or number determining how long the animation will run.
callback function to call once the animation is complete.