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
Related
.ellenon {
box-sizing: border-box;
width: 350px;
height:350px;
background-image: url("https://wallpapercave.com/wp/wp5609581.jpg");
filter: grayscale(100%);
color:white;
transition: 0.5s;
}
.ellenon :where(h1, p) {
line-height:1.5em;
letter-spacing: 1.1px;
padding-right: 10px;
padding-left: 10px;
transition: 0.5s;
}
.ellenon:hover {
filter: grayscale(0%);
}
.ellenon h1:hover {
transform: translate(0px, -20px);
color:transparent;
transition: 0.5s;
}
.ellenon p:hover {
transform: translate(0px, 20px);
color:transparent;
transition: 0.5s;
}
.ellenon2:hover {
transform: translate(0px, -20px);
color:transparent;
}
<div class="ellenon"><a href="https://codepen.io/" class="ellenon2"><h1>What is Lorem Ipsum?</h1> <p>
Lorem Ipsum is simply dummy text</p></a></div>
Hello there, I am trying to create a simple CSS animation as you can see in my code. However, I can't understand how to execute both hovers once the user hovers over the external div. Is this possible with raw CSS or JS is needed?
Thanks
You can select the .outer:hover and .outer:hover .inner so both will change when the outer is hovered
.outer{
width:100px;
height:100px;
background-color:orange;
}
.inner{
width:50px;
height:50px;
background-color:blue;
}
.outer:hover{
background-color:green;
}
.outer:hover .inner{
background-color:red;
}
<div class="outer">
<div class="inner"></div>
</div>
use .one:hover .two . if you have hover on .one you change .two
I have a ken burns effect slideshow running with multiple pictures. I want to add an overlay on the mobile site of the slideshow, where the colours are switching between green red yellow and blue automatically. The overlay is not appearing and I can't figure out the problem. Any help is appreciated.
HTML:
<div id="slideshow">
<img src="images/Campus2.jpg" alt="school pic">
<img src="images/bio_lab_optimised.jpg" alt="bio lab pic">
<img src="images/Capture.jpg" alt="school pic">
<img src="images/class_optimised.jpg" alt="class pic">
<img src="images/LFPS_optimised.jpg" alt="school pic">
<img src="images/phy_lab_optimmised.jpg" alt="physics lab">
<img src="images/cs_lab.jpg" alt="class pic">
<img src="images/x-optimised.jpg" alt="school pic">
<img src="images/page-1-hero-image.jpg" alt="school's image">
<img src="images/kindergarten2.jpg" alt="kindergarten">
</div>
CSS: (for overlay)
.overlay {
position: relative;
top:0;
left:0;
width:100%;
height:100%;
display: block;
z-index:3;
animation: color-animation 80s linear alternate;
}
#keyframes color-animation {
0% {
background-color: rgba(255,0,0,0.5);
}
25% {
background-color: rgba(0,255,0,0.5);
}
50% {
background-color: rgba(0,0,255,0.5);
}
100% {
background-color: rgba(255,255,0,0.5);
}
}
CSS: (ken burns effect)
#slideshow{
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
#slideshow img {
position: absolute;
left: 0;
top: 0;
z-index: 1;
/* to make pic responsive */
min-height: 100%;
min-width: 1024px;
width: 100vw;
height: 100vh;
opacity:0;
-webkit-transition-property: opacity, -webkit-transform;
-webkit-transition-duration: 3s, 45s;
-moz-transition-property: opacity, -moz-transform;
-moz-transition-duration: 3s, 45s;
-ms-transition-property: opacity, -ms-transform;
-ms-transition-duration: 3s, 45s;
-o-transition-property: opacity, -o-transform;
-o-transition-duration: 3s, 4s;
transition-property: opacity, transform;
transition-duration:3s, 45s;
}
#slideshow img {
-webkit-transform-origin: bottom left;
-moz-transform-origin: bottom left;
-ms-transform-origin: bottom left;
-o-transform-origin: bottom left;
transform-origin: bottom left;
}
#slideshow img:nth-child(2n+1) {
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-ms-transform-origin: top right;
-o-transform-origin: top right;
transform-origin: top right;
}
#slideshow img:nth-child(3n+1) {
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-ms-transform-origin: top left;
-o-transform-origin: top left;
transform-origin: top left;
}
#slideshow img:nth-child(4n+1) {
-webkit-transform-origin: bottom right;
-moz-transform-origin: bottom right;
-ms-transform-origin: bottom right;
-o-transform-origin: bottom right;
transform-origin: bottom right;
}
/**
* Because of the stacking context, we need to make sure that the first image (in source) is not hidden by the last one.
* The rule below moves all images past the second one down the stack.
* This is because the second image needs to show on top of the first one when it transitions in.
*/
#slideshow .fx:first-child + img ~ img {
z-index:-1;
}
/**
* Because images are styled with a different point of origin, the following rule will create different panning effects.
*/
#slideshow .fx {
opacity:1;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
Javascript:
function slideEffect(){
//apply fx class to first element
document.getElementById('slideshow').getElementsByTagName('img')[0].className = "fx";
//loop kenburns effect every 15 seconds
window.setInterval(kenBurns, 15000);
//gets all images under slideshow
var images = document.getElementById('slideshow').getElementsByTagName('img'),
numberOfImages = images.length,
i= 1;
function kenBurns() {
//applies class fx appropriately
if(i==numberOfImages){ i = 0;}
images[i].className = "fx";
if(i===0){ images[numberOfImages-2].className = "";}
if(i===1){ images[numberOfImages-1].className = "";}
if(i>1){ images[i-2].className = "";}
i++;
}
};
if (window.innerWidth < 480)
{
$('#slideshow').addClass('.overlay');
}
slideEffect();
You are basically just changing the style of #slideshow.
What you properly want instead, is to add a separate overlay on top of the slider. To do that I would highly recommend to use a pseudo-element.
I would also recommend to use media-queries instead of your JavaScript solution. It's a bit nicer.
If you want to keep your way, change .overlay to this:
.overlay:before {
display: block;
content: '';
position: relative;
top:0;
left:0;
width:100%;
height:100%;
z-index:3;
animation: color-animation 80s linear alternate;
}
..or if you want to use media-queries instead, remove this:
if (window.innerWidth < 480)
{
$('#slideshow').addClass('.overlay');
}
..and add this to the CSS instead:
#media screen and (max-width : 480px) {
#slideshow:before {
display: block;
content: '';
position: relative;
top:0;
left:0;
width:100%;
height:100%;
z-index:3;
animation: color-animation 80s linear alternate;
}
}
It almost do the exact same thing. When the screen width is lower than 480px, a pseudo-element is added to #slideshow, which in fact is the overlay.
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;
}
I created an animated header div menu that slides down on page load. I used animation-delay to delay the animation for 1 second. When the user scrolls down the header div changes colors fine but when scrolling back up the header disappears for a split second. Please help.
$(window).scroll(function() {
if ($(this).scrollTop() > 250){
$('header').addClass("sticky");
$('a').css({
color: '#fff'
});
}
else{
$('header').removeClass("sticky");
$('a').css({
color: '#151515'
});
}
});
body{
margin:0px;
}
#content{
height:500px;
width:500px;
display:block;
background-color:pink;
margin: 0 auto;
margin-top:50px;
}
header{
position: fixed;
top: -300px;
width: 100%;
height:50px;
padding-top:25px;
text-align: center;
background: red;
z-index: 1;
font-size: .8em;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
transition: all 0.4s ease;
animation:theheader 1s;
-moz-animation:top theheader 1s; /* Firefox */
-webkit-animation:theheader 1s; /* Safari and Chrome */
-webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
animation-delay: 1s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
header.sticky {
height:50px;
padding-top:25px;
background-color: blue;
color: #FFF;
}
#-moz-keyframes theheader
{
from {
top: -300px;
}
to {
top:0px;
}
}
<header>
MENU
</header>
<div id="content">
</div>
<div id="content">
</div>
<div id="content">
</div>
https://jsfiddle.net/qectrqg3/35/
If you're simply animating the top value, I would recommend using transition instead of animations. Transitions will ensure you don't get a flicker when changing "animation" values in the middle of a transition.
Quick question guys - what would be the best method to achieve effect like below? I want the exact shape of a button, but in different colour, to slide in from the bottom. I currently have the button on pure CSS, can I keep it that way (preferred) or do I need to make the button a sprite gfx and just animate background position?
You can do it with pure CSS:
.button {
width: 200px; height: 100px;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, blue 50%, orange 50%);
-webkit-transition: background-position 1s;
-moz-transition: background-position 1s;
transition: background-position 1s;
}
.button {
background-position: 0 +100%;
}
http://jsfiddle.net/P6Jx7/
You can do it with :before pseudo-selector like this:
HTML
<div class="button">Send</div>
CSS
.button {
width:150px;
border-radius:10px;
position:relative;
overflow:hidden;
}
.button a{
display:block;
height:50px;
line-height:50px;
position:relative;
z-index:10;
}
.button:before {
content:" ";
display:block;
width:150px;
height:50px;
border-radius:10px;
background:orange;
position:absolute;
left:0;
top:100%;
transition:all 1s;
}
.button:hover:before {
top:0;
}
Check this Demo Fiddle