So I'm building a page that has a background image:
body {
background:url(images/bg.png) center center no-repeat fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover
}
The page loads with a div that looks like a alert/message. When this div loads I want a short animation of the background-image getting darker,
Right now I use this:
back {
background:rgba(0,0,0,.95);
display:block;
height:100%;
left:0;
opacity:1;
position:fixed;
top:0;
width:100%
}
This makes it darker, but I want this to happen gradually in a smooth transition/animation.
You can use #keyframes for this. I don't know what your HTML looks like, but here's a little demo:
.back {
background:rgba(0,0,0,.95);
display:block;
height:500px;
left:0;
opacity:1;
position:fixed;
top:0;
width:500px;
}
#keyframes back-change {
from { background: rgba(133,133,133,.95) }
to { background: rgba(0,0,0,.95) }
}
.back {
animation: back-change 4s linear;
}
<div class="back"></div>
I set it to change from light to dark over 4s in a linear pattern. You can change the duration or change the pattern to whatever you want (none, infinite, etc.).
Notice that the name back-change that follows the #keyframes word is what you'll have to call in the the animation property later on. If you change the name in one spot, you'll have to change it in both.
Here's a JSFiddle Example as well for messing around with on your own.
You can also use CSS3 Transitions as well. These have been supported a little longer in web browsers.
.back {
background:rgba(0,0,0,.95);
display:block;
height:500px;
left:0;
opacity:1;
position:fixed;
top:0;
width:500px;
transition-property: background-color;
transition-duration: 0.3s;
}
.back:hover {
background-color: rgba(133,133,133,.95);
}
<div class="back"></div>
Again, here's a JSFiddle Example for you to play with.
You can use simple css transition and jQuery addClass() method only to set element class attribute.
JS
$( window ).load( function() {
$( '.overlay' ).addClass( 'dark' );
});
CSS
.overlay {
background-color: rgba(0,0,0,0);
transition: background-color 1s ease;
}
.dark{
background-color: rgba(0,0,0,.95);
}
FIDDLE
This is a job for a transition, not an animation:
In this example I'll change the opacity to fade out when you hover over it...
.TransitStyle {
background:rgba(0,0,0,.95);
display:block;
height:100%;
left:0;
opacity:1;
position:fixed;
top:0;
width:100%
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-ms-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
-webkit-transition-timing-function: linear;
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.TransitStyle:hover {
opacity: 0.0;
}
Related
I want to animate the div when moving from left to right
The div is moving fine but with no animation
It is very fast
and more over i have assigned the top and right property to the div when hover but it is not happening
HTML:
<body><div></div></body>
CSS:
div
{
width:100px;
height:100px;
background:red;
transition-property: right, left;
transition-duration: 10s;
-webkit-transition-property: right, left; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-timing-function:ease;
position:absolute;
}
div:hover
{
right:30px;
top:10px;
}
JS Fiddle
I need the div to be moved with ease and slowly
First you need to define right for starting position, e.g right: calc(100% - 100px);
.wrap {
width: 100%;
height: 100px;
background: orange;
}
.cube {
width:100px;
height:100px;
background:red;
right: calc(100% - 100px);
transition-property: right;
transition-duration: 10s;
-webkit-transition-property: right; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-timing-function:ease;
position:absolute;
}
.wrap:hover .cube
{
right:30px;
}
<div class="wrap">
<div class="cube"></div>
</div>
Try this, it's works
div {
width:100px;
height:100px;
background:red;
transition: 1000ms;
position:absolute;
left: 0;
}
div:hover {
left: 100%;
margin-left: -100px;
}
JSFiddle http://jsfiddle.net/3SYka/287/
Replace right,left with margin-left.
div
{
width:100px;
height:100px;
background:red;
transition-property: margin-left;
transition-duration: 2s;
-webkit-transition-property: margin-left; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-timing-function:linear;
position:absolute;
}
div:hover
{
margin-left:80%; /* Using margin-left */
top:10px;
}
<body>
<div></div>
</body>
Did you know that we can hardware-accelerate graphics-intensive CSS features by offloading them to the GPU for better rendering performance in the browser?
Try to use it, here is an example with transform
jsfiddle
Is it possible to create a "growing bar" animation in css?
Example:
http://i.stack.imgur.com/lWIkw.gif
if no is this javascript the right approach?
window.addEventListener("Click",test());
i=0;
function test(){
setTimeout(function(){
i+=5;
document.getElementById('growing-bar').style.height = i + 'px';
if(i<99){
test();
}
},50);
}
#growing-bar{
background:red;
width:50px;
margin:50px;
}
<div id="growing-bar"></div>
working Fiddle
Thanks in advance!
Here's a pure CSS solution:
div {
height: 10px;
width: 50px;
background: black;
animation-name: grow;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#keyframes grow {
100% { height: 100px; };
}
<div></div>
You can utilize transform-origin set to top, translate set to 0%, 0%, transform rotate set to 180deg for height animation to be applied vertically; include forwards at animation declaration
#growing-bar{
background:red;
width:50px;
margin:50px;
position:relative;
top:100px;
transform-origin:top;
transform: translate(0%, 0%) rotate(180deg);
animation: grow 20s forwards;
}
#keyframes grow {
from {
height:0px;
}
to {
height:150px;
}
}
<div id="growing-bar"></div>
When you mouse over either image, each rotates 360 degrees and changes from 50% to 100% opacity revealing image text below. I am trying to rotate the opposite image from which I hover over to simulate turning gears.
See Fiddle here.
#navBlueGear {
float:left;
transition: opacity 1s;
opacity:0.5;}
#navBlueGear:hover {
opacity:1.0;}
#aboutMe {
position:relative;
float:left;
top:130px;
left:-80px;
opacity: 0;
-webkit-transition: 1.5s;
-moz-transition: 1.5s;
-o-transition: 1.5s;
transition: 1.5s;}
#navBlueGear:hover ~ #aboutMe {
opacity: 1;}
.aboutLink {
-webkit-transition:all 1.5s ease-out;
-moz-transition:all 1.5s ease-out;
-ms-transition:all 1.5s ease-out;
-o-transition:all 1.5s ease-out;
transition:all 1.5s ease-out;}
.aboutLink:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
#navOrangeGear {
position:relative;
float:left;
top:85px;
left:-75px;
transition: opacity 1s;
opacity:0.5;}
#navOrangeGear:hover {
opacity:1.0;}
#work {
position:relative;
float:left;
top:176px;
left:-143px;
opacity: 0;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;}
#navOrangeGear:hover ~ #work {
opacity: 1;}
.workLink {
-webkit-transition:all 1.5s ease-out;
-moz-transition:all 1.5s ease-out;
-ms-transition:all 1.5s ease-out;
-o-transition:all 1.5s ease-out;
transition:all 1.5s ease-out;}
.workLink:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);}
Is it possible to turn the opposite gear counter to the image you initially hover over as well as control the speed as the teeth of each need to look realistic?
Is it possible in CSS3 and if not how would I accomplish this in JavaScript? Any other suggestions or advice is appreciated, I am just beginning to work with writing code, thank you in advance.
Try this solution
http://jsfiddle.net/BRGG2/30/
I put all elements in a containing div and set the rotation to work when that div is hovered.
Each gear keeps its own opacity and hover link.
I set the second gear to turn the opposite way using this
#container:hover .workLink {
-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-ms-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
transform:rotate(-360deg);
}
As to calibrate both gears speed, this will take some fine tuning, using -webkit-transition-duration.
I'm having an issue in chrome with a css3 transform rotate transition. The transition is working fine but just after it finishes the element shifts by a pixel. The other strange thing is that it only happens when the page is centered (margin:0 auto;). The bug is still there if you remove the transition as well.
You can see it happening here:
http://jsfiddle.net/MfUMd/1/
HTML:
<div class="wrap">
<img src="https://github.com/favicon.ico" class="target" alt="img"/>
</div>
<div class="wrap">
<div class="block"></div>
</div>
CSS:
.wrap {
margin:50px auto;
width: 100px;
}
.block {
width:30px;
height:30px;
background:black;
}
.target,.block {
display:block;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.target:hover,.block:hover {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
Comment out the margin:0 auto; line to make it go away.
Anyone have any ideas of how to stop this while keeping the page centered?
I'm using Version 24.0.1312.57 on OSX 10.6.8
Cheers
Actually just add this to the site container which holds all the elements:
-webkit-backface-visibility: hidden;
Should fix it!
Gino
I had the same issue, I fixed it by adding the following to the css of the div that is using the transition:
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
Backface is used for 3D-based transitions but if you are only using 2D there is no need for the extra stuff.
will-change: transform; on the element helped to me in 2022 (Chrome). No more 1px shift of the text inside the element after zoom animation.
there is something unusual in the relation between the body dimension and the structure of the transform. I don't in fact is because the fiddle iframe that contains the preview of the code.
Anyway, I will suggest this approach instead:
body{
width:100%;
float:left;
}
.wrap {
margin: 50px 45%;
width: 5%;
float: left;
}
.block {
width:30px;
height:30px;
background:black;
}
.target,.block {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.target:hover,.block:hover {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
Here is the updated fiddle
For 3d transform use this instead:
-webkit-transform: perspective(1px) scale3d(1.1, 1.1, 1);
transform: perspective(1px) scale3d(1.1, 1.1, 1);
I have a centered div and 4 other divs - one on each side of the centered div. When I click a button each of the div slide into the frame and push the centered div out.
It works fine in chrome but fails using firefox, leaving me with no error from firebug.
Here is my implementation which doesn't currently work correctly in firefox.
As you can see, in firefox the centered div simply disappears instead of sliding out of the screen. Using chrome, the centered div slides out as intended.
Can someone take a look with firebug and tell me what they think might be causing the problem?
This code was based off of a jsfiddle that works fine using either chrome or firefox.
Here is the code to the jsfiddle:
here is the html
<div id="fullContainer">
<div id="right">
</div>
<div id="left">
</div>
<div id="top">
</div>
<div id="bottom">
</div>
</div>
<div id="centerContainer">
<div id="relativeContainer">
<div id="content">
This is where your face should go. Notice that I placed it within a centering div.
This will enable the face to be absolutely positioned, and allow for you to modify
it's position when the side-bars slide in.
<div data-move="left">Open Left</div>
<div data-move="right">Open Right</div>
<div data-move="top">Open Top</div>
<div data-move="bottom">Open Bottom</div>
</div>
</div>
</div>
here is the css
#centerContainer {
position:fixed;
top:50%;
left:50%;
width:0;
height:0;
}
#relativeContainer {
position:relative;
}
#fullContainer {
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
}
#content {
position:absolute;
width:300px;
height:400px;
top:-200px;
left:-150px;
background:#BADA55;
border:1px solid #444;
padding:10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#content.right {
left:-250px;
}
#content.left {
left:-50px;
}
#content.bottom {
top:-300px;
}
#content.top {
top:-100px;
}
#content div {
cursor:pointer;
color:blue;
text-decoration:underline;
margin-top:15px;
text-align:center;
}
#left {
position:absolute;
top:0;
left:-125px;
height:100%;
width:100px;
background:blue;
border:1px solid #444;
padding:10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#left.opened {
left:0;
}
#right {
position:absolute;
top:0;
right:-125px;
height:100%;
width:100px;
background:green;
border:1px solid #444;
padding:10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#right.opened {
right:0;
}
#top {
position:absolute;
left:0;
top:-125px;
width:100%;
height:100px;
background:yellow;
border:1px solid #444;
padding:10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#top.opened {
top:0;
}
#bottom {
position:absolute;
left:0;
bottom:-125px;
width:100%;
height:100px;
background:red;
border:1px solid #444;
padding:10px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#bottom.opened {
bottom:0;
}
here is the javascript:
function SlideOut(element){
$(".opened").removeClass("opened");
$("#"+element).addClass("opened");
$("#content").removeClass().addClass(element);
}
$("#content div").click(function(){
var move = $(this).attr('data-move');
SlideOut(move);
});
Here is the fiddle
Thank you
katie
I did some testing and found out what's happening. This is reproduced in this fiddle for illustration and demonstration purposes.
In Firefox if you are transitioning the CSS attribute left, it needs to have an initial value to start from. If it doesn't then it won't transition, it'll just assign the value to the attribute.
In Chrome if you don't have the initial value set it apparently just starts from wherever it is and doesn't worry about it.
If you check out the above fiddle in Firefox and click on the first row, it just appears farther over, while the second row transitions over. Only difference is the second row has a left: 0 initially set. On Chrome both work the same.
If you put a left: 0 on your #content div then it will slide like it should in Firefox. (Tested in Firebug and that does fix it).