My background has image with transition. The text has to fade in after the background transition completed. I used transition-delay but it works in mozilla and not in chrome. As for the fade in effect, it works in chrome and not in mozzila. Now all I want is the text to fade in after delay.How to correct my code to achieve this pls?
css
.text2
{
margin-top:10%;
margin-left:0;
padding-left:0;
/*fade in effect*/
transition-delay: 2s;
-moz-transition-delay:2s;
-o-transition-delay:2s;
-webkit-transition-delay:2s;
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
#target {
position: relative;
left:0;
background-image:url('../img/top-bg.jpg');background-repeat:no-repeat;
width: 120%;
background-size:cover;
height: 600px;
background-position: 200px 50%;
transition: background-position 2s ease-in-out;
}
#target.wide{
left: -20%;
padding-left: 30%;
background-position: 0px 50%;
}
script
<script>
$(document).ready(function () {
$('#target').toggleClass("wide");
});
</script>
html
<div id="target">
<div class="small-12 medium-11 large-11 columns text2">
Beyond Law,<br/>
The Spirit of Innovation is Our strenght.
</div>
</div>
</div>
<div style="clear: both"></div>
Link:
http://vani.valse.com.my/beldon/index.php
EDITED
text2
{
margin-top:10%;
margin-left:0;
padding-left:0;
/*fade in effect*/
**transition: opacity 0.5s ease-in;**
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
transition-delay: 2s;
-moz-transition-delay:2s;
-o-transition-delay:2s;
-webkit-transition-delay:2s;
}
added the line in bold. It works as desired in mozilla but in chrome the transition delay not working.
I added below lines after the animation as below and got it working in chrome.
-webkit-animation-delay: 4s; /* Chrome, Safari, Opera */
/*to make the text not visible untill the transition starts*/
-webkit-opacity: 0;
/*without this the text will disappear after the animation*/
-webkit-animation-fill-mode: forwards;
so it should look like this in full
.text2
{
margin-top:10%;
margin-left:0;
padding-left:0;
/*fade in effect*/
transition: opacity 0.5s ease-in;
-webkit-transition: opacity 0.5s ease-in;
-moz-transition: opacity 0.5s ease-in;
-o-transition: opacity 0.5s ease-in;
animation: fadein 4s;
-moz-animation: fadein 4s; /* Firefox */
-webkit-animation: fadein 4s; /* Safari and Chrome */
-o-animation: fadein 4s; /* Opera */
transition-delay: 4s;
-moz-transition-delay:4s;
-o-transition-delay:4s;
-webkit-transition-delay:4s;
-webkit-animation-delay: 4s; /* Chrome, Safari, Opera */
/*to make the text not visible untill the transition starts*/
-webkit-opacity: 0;
/*without this the text will disappear after the animation*/
-webkit-animation-fill-mode: forwards;
}
#keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
#-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
#-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
Related
I would create a pulse color effect with a max duration of one minute. To have this effect with css I can do something like this:
#-webkit-keyframes pulse {
0% { background-color: #ed8c55; }
50% { background-color: #FFF; }
100% { background-color: #ed8c55; }
}
#-moz-keyframes pulse {
0% { background-color: #ed8c55; }
50% { background-color: #FFF; }
100% { background-color: #ed8c55; }
}
#-o-keyframes pulse {
0% { background-color: #ed8c55; }
50% { background-color: #FFF; }
100% { background-color: #ed8c55; }
}
#keyframes pulse {
0% { background-color: #ed8c55; }
50% { background-color: #FFF; }
100% { background-color: #ed8c55; }
}
.element {
width: 50px;
height: 50px;
background: #ed8c55;
-webkit-animation: pulse 3s infinite; /* Safari 4+ */
-moz-animation: pulse 3s infinite; /* Fx 5+ */
-o-animation: pulse 3s infinite; /* Opera 12+ */
animation: pulse 3s infinite; /* IE 10+, Fx 29+ */
}
<div class="element"></div>
But in this one I can't control the time. Particularly, I would make this effect in an icon inside a button
<md-button aria-label="Info" id="info" title="info" ng-click="openInfo()" class="md-icon-button">
<i class="zmdi zmdi-help red-color"></i>
</md-button>
That <i /> element should pulse for max one minute in red color. Is this possible do it with angularjs or simply javascript?
But in this one I can't control the time
You can by using animation-iteration-count. As your animation takes 3 seconds you can give it a value of 20:
.element {
width: 50px;
height: 50px;
background: #ed8c55;
-webkit-animation: pulse 3s 20; /* Safari 4+ */
-moz-animation: pulse 3s 20; /* Fx 5+ */
-o-animation: pulse 3s 20; /* Opera 12+ */
animation: pulse 3s 20; /* IE 10+, Fx 29+ */
}
Everything works perfectly in all browsers except Chrome. The fade in effects seems to work fine but the floatInCommand animation stutters and makes the Commend (a bootstrap container) lock in place after 1 second. I don't know if I need to add anything else besides "-webkit". I have looked at threads with similar problems and they all fix it by adding "-webkit".
.slide-in {
-webkit-animation-name: floatInCommend;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
-moz-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-direction: normal;
-webkit-animation-delay: 1.25s;
}
#-webkit-keyframes floatInCommend {
from {
opacity: 0;
top: -100%;
}
to {
opacity: 1;
top: 75;
}
}
.slide-in-footer {
-webkit-animation-name: floatInFooter;
-webkit-animation-duration: 2s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
-moz-animation-fill-mode: both;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0.5s;
}
#-webkit-keyframes floatInFooter {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.slide-in-nav {
-webkit-animation-name: floatInFooter;
-webkit-animation-duration: 2s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both; /* Safari 4.0 - 8.0 */
-moz-animation-fill-mode: both;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0.5s;
}
#-webkit-keyframes floatInNav {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
You need both the -webkit, -moz, and non vendor prefix attributes. Consider using a task runner and an autoprefixer to make sure you have all css vendor prefixes in place before publishing your code.
I have three different image to which I want to apply a fan like animation.
I cant club the images in Photoshop as I want the images to appear one after the other.
This is the code (I have used dummy images in the code)
.bannerimg{
position:relative;
}
.bannerimg img{
position:absolute;
max-width:500px;
}
.bannerimg .bannerhtml{
-ms-transform: rotate(300deg); /* IE 9 */
-webkit-transform: rotate(300deg); /* Chrome, Safari, Opera */
transform: rotate(300deg);
max-width:175px;
left:50px;
-webkit-animation: fadeIn 500ms ease-in-out 200ms both;
animation: fadeIn 500ms ease-in-out 200ms both;
}
.bannerimg .bannercss{
-ms-transform: rotate(63deg); /* IE 9 */
-webkit-transform: rotate(63deg); /* Chrome, Safari, Opera */
transform: rotate(63deg);
max-width:170px;
top:9px;
left:227px;
-webkit-animation: fadeIn 500ms ease-in-out 600ms both;
animation: fadeIn 500ms ease-in-out 600ms both;
}
.bannerimg .bannerjs{
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
max-width:175px;
top:150px;
left:135px;
-webkit-animation: fadeIn 500ms ease-in-out 1000ms both;
animation: fadeIn 500ms ease-in-out 1000ms both;
}
.windmill
{
animation: spin-clockwise 1.25s linear 1200ms infinite;
transform-origin: 30% 100%;
}
#keyframes spin-clockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
<div class="bannerimg windmill">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerhtml" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannercss" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerjs" />
</div>
This is the fiddle: http://jsfiddle.net/wzht89r3/2/
Solution can also be in jquery or javascript.
Something like this? I just changed the transform-origin of your .windmill rule.
.bannerimg{
position:relative;
}
.bannerimg img{
position:absolute;
max-width:500px;
}
.bannerimg .bannerhtml{
transform: rotate(300deg);
max-width:175px;
left:50px;
-webkit-animation: fadeIn 500ms ease-in-out 200ms both;
animation: fadeIn 500ms ease-in-out 200ms both;
}
.bannerimg .bannercss{
-ms-transform: rotate(63deg); /* IE 9 */
-webkit-transform: rotate(63deg); /* Chrome, Safari, Opera */
transform: rotate(63deg);
max-width:170px;
top:9px;
left:227px;
-webkit-animation: fadeIn 500ms ease-in-out 600ms both;
animation: fadeIn 500ms ease-in-out 600ms both;
}
.bannerimg .bannerjs{
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
max-width:175px;
top:150px;
left:135px;
-webkit-animation: fadeIn 500ms ease-in-out 1000ms both;
animation: fadeIn 500ms ease-in-out 1000ms both;
}
.windmill
{
animation: spin-clockwise 1.25s linear 1200ms infinite;
transform-origin: 220px 150px;
}
#keyframes spin-clockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
<div class="bannerimg windmill">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerhtml" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannercss" />
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Red_Arrow_Down.svg/2000px-Red_Arrow_Down.svg.png" class="bannerjs" />
</div>
Personally I would get rid of those additional classes and use the :nth-child pseudo class. Having each child with it's own offset (for example: top:150px; left:135px;) would mean that you would have to recalculate the positioning every time you change the image, so I removed them and found another way of positioning.
I used different images as they were facing the wrong direction. For this to work the arrow must be facing the rotation origin, in this case 0 0 or top-left.
To condense the answer I removed all vendor prefixes and the fade in transitions.
#windmill {
animation: spin-clockwise 2s linear 1200ms infinite;
transform-origin: 0 0;
position: relative;
top: 100px; /*Image dimensions*/
left: 100px;
}
#windmill > * {
position: absolute;
transform-origin: 0 0;
}
#windmill > *:nth-child(1) {transform: rotate(0deg);}
#windmill > *:nth-child(2) {transform: rotate(120deg);}
#windmill > *:nth-child(3) {transform: rotate(240deg);}
#keyframes spin-clockwise {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<div id="windmill">
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Arrow_Blue_UpperLeft_001.svg" />
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Arrow_Blue_UpperLeft_001.svg" />
<img src="https://upload.wikimedia.org/wikipedia/commons/f/f4/Arrow_Blue_UpperLeft_001.svg" />
</div>
I have my markup and css like this
<div class="box">Box Content</div>
css goes like this
<style>
#-webkit-keyframes widthresize {
0% {
width:10px
}
50% {
width:50px
}
100% {
width:100px
}
}
#-moz-keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
#-ms-keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
#keyframes widthresize {
0% {
width:0%
}
50% {
width:50%
}
100% {
width:100%
}
}
body {
background-color: #333;
}
.box {
color: #FFF;
}
.box::after {
background: #FFF;
content: '';
position: relative;
width: 0;
height: 1px;
left: 0;
display: block;
clear: both;
}
.widthanimation::after {
-webkit-animation-name: widthresize;
-moz-animation-name: widthresize;
-o-animation-name: widthresize;
-ms-animation-name: widthresize;
animation-name: widthresize;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;
-o-animation-timing-function: ease;
}
</style>
and the jQuery like this
jQuery(document).ready(function($) {
$('div.box').addClass('widthanimation');
});
I want that when jQuery adds class widthanimation to the div then in pseudo after it will start to animate the width to 100%. For animation I have used css keyframe which you can see in the css. But its not working at all. Sorry but I can't change my markup. So can someone tell me how to get the animation with this markup? Any help and suggestions will be really appreciable. The fiddle link can be seen here Thanks.
It's not working because you didn't specify how long the animation should take to complete. Try this:
.widthanimation::after {
-webkit-animation: widthresize 1s ease;
-moz-animation: widthresize 1s ease;
-o-animation: widthresize 1s ease;
-ms-animation: widthresize 1s ease;
animation: widthresize 1s ease;
}
Updated fiddle
Note that 1s is 1 second. You can adjust this as you require.
To stop the animation at the 100% keyframe, use animation-fill-mode: forwards:
Example fiddle
CSS animation seems a bit overkill, could you not just transition?
https://jsfiddle.net/9qc2yg59/
.box::after {
background: #FFF;
content: '';
position: absolute;
width: 0;
height: 1px;
left: 0;
display: block;
clear: both;
-webkit-transition: width 1s ease-out;
transition: width 1s ease-out;
}
.box.widthanimation::after {
width:100%;
}
I have to develop a similar website like http://www.unlocknrepair.com/
In this website when you hover your mouse over the Unlocking or Phone repair button a dropdown menu appears. Is there a way to make this dropdown appear in bouncy way.. like I want it to bounce a bit before it stabilizes. It is possible in jQuery, but can it be done using only css and javascript?
If experimental css3 is an option, you can do it even without javascript using css animations with the #keyframes rule.
#parent {
position:relative;
height: 40px;
}
#onhover {
display: none;
position: absolute;
top: 0;
}
#parent:hover #onhover {
display: block;
top: 30px;
animation:mymove 0.8s linear;
-moz-animation:mymove 0.8s linear; /* Firefox */
-webkit-animation:mymove 0.8s linear; /* Safari and Chrome */
-o-animation:mymove 0.8s linear; /* Opera */
-ms-animation:mymove 0.8s linear; /* IE */
}
#keyframes mymove
{
0% {top:0px;}
10% {top:3px;}
40% {top:40px;}
60% {top:25px;}
80% {top:35px;}
100% {top:30px;}
}
#-moz-keyframes mymove /* Firefox */
{
0% {top:0px;}
10% {top:3px;}
40% {top:40px;}
60% {top:25px;}
80% {top:35px;}
100% {top:30px;}
}
#-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
10% {top:3px;}
40% {top:40px;}
60% {top:25px;}
80% {top:35px;}
100% {top:30px;}
}
#-o-keyframes mymove /* Opera */
{
0% {top:0px;}
10% {top:3px;}
40% {top:40px;}
60% {top:25px;}
80% {top:35px;}
100% {top:30px;}
}
#-ms-keyframes mymove /* IE */
{
0% {top:0px;}
10% {top:3px;}
40% {top:40px;}
60% {top:25px;}
80% {top:35px;}
100% {top:30px;}
}
<div id="parent">hover me<div id="onhover">hovering</div></div>
Another "bounce" animation:
$(function() {
$(document.body).delegate( "img", "mouseenter", function() {
var $this = $(this).addClass("right");
setTimeout(function() {
$this.removeClass("right");
}, 2000);
});
});
body { font-size: .7em; font-family: Arial, Helvetica, "Liberation Sans", sans-serif; padding: 0 !important; }
img {
-moz-transition: -moz-transform 1s ease-in;
-webkit-transition: -webkit-transform 1s ease-in;
-o-transition: -o-transform 1s ease-in;
-ms-transition: -ms-transform 1s ease-in;
}
#anim.right {
-moz-animation-name: bounce;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;
-moz-transform: translate(400px);
-moz-transition: none;
-webkit-animation-name: bounce;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-transform: translate(400px);
-webkit-transition: none;
}
#-moz-keyframes bounce {
from {
-moz-transform: translate(0px);
-moz-animation-timing-function: ease-in;
}
60% {
-moz-transform: translate(400px);
-moz-animation-timing-function: ease-out;
}
73% {
-moz-transform: translate(360px);
-moz-animation-timing-function: ease-in;
}
86% {
-moz-transform: translate(400px);
-moz-animation-timing-function: ease-out;
}
93% {
-moz-transform: translate(380px);
-moz-animation-timing-function: ease-in;
}
to {
-moz-transform: translate(400px);
-moz-animation-timing-function: ease-out;
}
}
#-webkit-keyframes bounce {
from {
-webkit-transform: translate(0px);
-webkit-animation-timing-function: ease-in;
}
60% {
-webkit-transform: translate(400px);
-webkit-animation-timing-function: ease-out;
}
73% {
-webkit-transform: translate(360px);
-webkit-animation-timing-function: ease-in;
}
86% {
-webkit-transform: translate(400px);
-webkit-animation-timing-function: ease-out;
}
93% {
-webkit-transform: translate(380px);
-webkit-animation-timing-function: ease-in;
}
to {
-webkit-transform: translate(400px);
-webkit-animation-timing-function: ease-out;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<img id="anim" src="http://hacks.mozilla.org/wp-content/uploads/2011/04/75px-Aurora210.png" width="75" height="75" />
See Mozilla Developer Network for more details and browser compatibility.
Yes, it is possible using native javascript. Take a look at this document
Note, I'm linking to the "easeOut" section, since I think that represents a ball's bouncing a little better than their "bounce".
Here's a good example, further down the same page.