So I have a grid of elements and I have set them to fade in one after the other on page load.
So they have a 0.2s delay from one element to the next fading in from opacity 0 to opacity 1.
I then want images in these elements to grow when there grid section is highlighted, but my animation-fill-mode is preventing this.
Any work arounds?
//Expand when hover over.
.main-image {
transition: transform .2s ease-in-out;
}
#portfolio:hover #portfolio-image {
transform: scale(1.1);
}
// Fade in with delay
#keyframes fadeInFromAbove {
0% {
transform: translateY(-30%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
#portfolio .main-image {
opacity: 0;
animation: 0.5s ease-out 0.2s 1 fadeInFromAbove;
animation-fill-mode: forwards;
}
HTML formatting:
<div id='portfolio' class='main-block'>
<div id='portfolio-image' class='main-image'></div>
</div>
Use two animations like below:
.main-image {
transition: transform .5s ease-in-out;
height: 50px;
margin: 10px;
background: red;
}
#portfolio:hover #portfolio-image {
transform: scale(1.1);
}
#keyframes fade {
100% {
opacity: 1;
}
}
#keyframes move {
0% {
transform: translateY(-30%);
}
}
#portfolio .main-image {
opacity: 0;
animation:
0.5s ease-out 0.2s fade forwards, /* forwards only for opacity */
0.5s ease-out 0.2s move;
}
<div id='portfolio' class='main-block'>
<div id='portfolio-image' class='main-image'></div>
</div>
Related
Im trying to create a blink effect by using 2 images.
I have 2 photos with a person, one with eyes opened and another with eyes closed. How can i make a blinking effect?
I was hoping to make it as real as possible, trying to blink quickly and then keep the eyes opened for 3-5sec and then blink in 1sec.
Found one example that is almost what i need but not quite yet
Would really appreciate some help
.imageswap {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
.imageswap img {
position:absolute;
left:0;
top: 0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
object-fit: contain;
width: 100%;
height: 100%;
}
#-webkit-keyframes blink {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes blink {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-o-keyframes blink {
0% {
opacity: 1;
}
49% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
img.openeyeimg {
-webkit-animation: blink 5s;
-webkit-animation-iteration-count: infinite;
-moz-animation: blink 5s;
-moz-animation-iteration-count: infinite;
-o-animation: blink 5s;
-o-animation-iteration-count: infinite;
}
<div class="imageswap">
<!-- NOTE: both images should be have same dimension, look&feel -->
<img src="https://i.stack.imgur.com/yqWK7.jpg" class="closeeyeimg">
<img src="https://i.stack.imgur.com/NgW24.jpg" class="openeyeimg">
</div>
I want to have a css only animation that fades in and out until hovered when displayed full. I can do both things seperately but not together. The hover element never works. Tried several combinations but here's the 2 seperate parts working:
#keyframes flickerAnimation {
0% { opacity:0.4; }
50% { opacity:0; }
100% { opacity:0.4; }
}
#-o-keyframes flickerAnimation{
0% { opacity:0.4; }
50% { opacity:0; }
100% { opacity:0.4; }
}
#-moz-keyframes flickerAnimation{
0% { opacity:0.4; }
50% { opacity:0; }
100% { opacity:0.4; }
}
#-webkit-keyframes flickerAnimation{
0% { opacity:0.4; }
50% { opacity:0; }
100% { opacity:0.4; }
}
.animate-flicker {
-webkit-animation: flickerAnimation 2s infinite;
-moz-animation: flickerAnimation 2s infinite;
-o-animation: flickerAnimation 2s infinite;
animation: flickerAnimation 2s infinite;
}
/* CSS for hover */
.animate {
opacity: 0.1;
transition: opacity 0.2s ease-in-out;
}
.animate:hover {
opacity: 1.0;
transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
}
#box {
width: 100px;
height: 100px;
background-color: #000;
}
<div id="box" class="animate-flicker animate">
As I commented above you cannot do such thing. As you can read in the spec:
As defined in [CSS3CASCADE], animations override all normal rules
So an idea is to unset the animation on hover:
#keyframes flickerAnimation {
0% { opacity:0.4; }
50% { opacity:0; }
100% { opacity:0.4; }
}
.animate-flicker {
animation: flickerAnimation 2s infinite;
}
/* CSS for hover */
.animate {
height:100px;
background:red;
opacity: 0.1;
transition: opacity 0.2s ease-in-out;
}
.animate:hover {
opacity: 1;
transition: opacity 0.2s ease-in-out;
animation:unset;
}
<div class="animate animate-flicker">
</div>
I need when last child (yellow square) animation ends, it starts on red square again.
I tried make for each square different animation, but that didn't work properly.
Also i tried to make infinite animation, but i want to make animation where first square translate to scale down, then up, then second square translate to scale down, then up, etc..., but with infinite animation it won't work even if i make higher delays.
#main {
width: 10%;
margin: 3em auto;
background: #dadada;
padding: 10px;
}
#col {
width: 100%;
display: block;
}
.upper,
.lower {
background: #fafafa;
display: inline-block;
width: 47.99%;
height: 60px;
-webkit-transition: all ease-in-out 0.3s;
-moz-transition: all ease-in-out 0.3s;
-ms-transition: all ease-in-out 0.3s;
-o-transition: all ease-in-out 0.3s;
transition: all ease-in-out 0.3s;
-webkit-animation: scale .4s;
-moz-animation: scale .4s;
-o-animation: scale .4s;
animation: scale .4s;
}
.upper:nth-child(1) {
background: #e03318;
/* RED */
}
.upper:nth-child(2) {
background: #0daa34;
/* GREEN */
}
.lower:nth-child(1) {
background: #1662dd;
/* BLUE */
}
.lower:nth-child(2) {
background: #d1b608;
/* YELLOW */
}
.upper:nth-child(1) {
animation-delay: .5s;
}
.upper:nth-child(2) {
animation-delay: 1s;
}
.lower:nth-child(1) {
animation-delay: 1.5s;
}
.lower:nth-child(2) {
animation-delay: 2s;
}
#-webkit-keyframes scale {
50% {
transform: scale(0.2);
}
100% {
transform: scale(1);
}
}
<div id="main">
<div id="col">
<div class="upper"></div>
<div class="upper"></div>
</div>
<div id="col">
<div class="lower"></div>
<div class="lower"></div>
</div>
</div>
This can be done with different animations for each rectangle:
#main {
width: 10%;
margin: 3em auto;
background: #dadada;
padding: 10px;
}
#col {
width: 100%;
display: block;
}
.upper, .lower {
background: #fafafa;
display: inline-block;
width: 47.99%;
height: 60px;
-webkit-transition: all ease-in-out 0.3s;
-moz-transition: all ease-in-out 0.3s;
-ms-transition: all ease-in-out 0.3s;
-o-transition: all ease-in-out 0.3s;
transition: all ease-in-out 0.3s;
-webkit-animation: scale .4s;
-moz-animation: scale .4s;
-o-animation: scale .4s;
animation: scale .4s;
}
.upper:nth-child(1){
background: #e03318; /* RED */
}
.upper:nth-child(2){
background: #0daa34; /* GREEN */
}
.lower:nth-child(1){
background: #1662dd; /* BLUE */
}
.lower:nth-child(2){
background: #d1b608; /* YELLOW */
}
.upper:nth-child(1) {
animation: scale-1 2s infinite;
}
.upper:nth-child(2) {
animation: scale-2 2s infinite;
}
.lower:nth-child(1) {
animation: scale-3 2s infinite;
}
.lower:nth-child(2) {
animation: scale-4 2s infinite;
}
#-webkit-keyframes scale {
50% { transform: scale(0.2); }
100% { transform: scale(1); }
}
#keyframes scale-1 {
0% { transform: scale(1); }
12.5% { transform: scale(0.2); }
25% { transform: scale(1); }
}
#keyframes scale-2 {
25% { transform: scale(1); }
37.5% { transform: scale(0.2); }
50% { transform: scale(1); }
}
#keyframes scale-3 {
50% { transform: scale(1); }
62.5% { transform: scale(0.2); }
75% { transform: scale(1); }
}
#keyframes scale-4 {
75% { transform: scale(1); }
87.5% { transform: scale(0.2); }
100% { transform: scale(1); }
}
<div id="main">
<div id="col">
<div class="upper"></div>
<div class="upper"></div>
</div>
<div id="col">
<div class="lower"></div>
<div class="lower"></div>
</div>
</div>
I have a pulsating css3 effect on a div, and I'd like it to have a hover effect that seamlessly blends with the pulse, I have a near finished JFiddle here:
https://jsfiddle.net/jnz7yfg0/
It's nearly there, but it's jerky when you hover over it, any ideas to make the animation smoother?
Many thanks!
Code here:
.orb {
width: 20px;
height: 20px;
border-radius: 10px;
background: #2fa4e7;
cursor: pointer;
opacity: 1;
-webkit-transform: scale(1);
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#-webkit-keyframes pulsate {
0% { opacity: 1; }
50% { opacity: .4; -webkit-transform: scale(3); }
100% { opacity: 1; }
}
.orb {
-webkit-animation: pulsate 2s infinite;
}
.orb:hover {
width: 20px;
height: 20px;
border-radius: 10px;
background: #2fa4e7;
cursor: pointer;
opacity: 1;
-webkit-transition: all .2s ease-in-out;
-webkit-animation: pulsatehover 2s infinite;
}
#-webkit-keyframes pulsatehover {
0% { opacity: 1; }
50% { opacity: .4; -webkit-transform: scale(6); }
100% { opacity: 1; }
}
As far as I know, there is no way in CSS to chain or merge 2 animations.
You can however get the effect that you want changing the way it works
.container {
width: 80px;
height: 80px;
margin: 100px;
border: solid red 1px;
position: relative;
perspective: 800px;
transition: perspective 2s;
}
.container:hover {
perspective: 400px;
}
.obj {
position: absolute;
width: 100%;
height: 100%;
background: lightblue;
border-radius: 50%;
-webkit-animation: pulse 1s infinite alternate;
animation: pulse 1s infinite alternate;
}
#-webkit-keyframes pulse {
0% {transform: translateZ(0px)}
100% {transform: translateZ(200px)}
}
#keyframes pulse {
0% {transform: translateZ(0px)}
100% {transform: translateZ(200px)}
}
<div class="container">
<div class="obj">
</div>
</div>
The trick is to make the animation change the z position of the element.
Then , the zoom effect is achieved with the perspective property (in the parent).
A lower pespective makes the effect of the transform bigger. Notice that the animation is always the same, it's the visual effect that changes.
Also, the perspective is animatable, so you can make the transition smooth
I'm trying to set up an image within a div that will slowly appear (opacity from 0 to 1) over 5 seconds. I have this code:
.fadeDivIn {
opacity: 1;
transition: opacity 5s ease-in;
-moz-transition: opacity 5s ease-in;
-webkit-transition: opacity 5s ease-in;
-o-transition: opacity 5s ease-in;
}
but I can't figure out how to trigger it automatically.
I've been doing transitions to other elements with CSS3 keyframes and would ideally like to apply something similar to opacity but have hit a brick wall. Can anyone help please?
Have a look at the following example , you need to use keyframes
div {
background: #333;
width: 200px;
height: 200px;
-webkit-animation: smooth 5s ease-in;
-moz-animation: smooth 5s ease-in;
-o-animation: smooth 5s ease-in;
-ms-animation: smooth 5s ease-in;
animation: smooth 5s ease-in;
}
#-webkit-keyframes smooth {
0% { opacity: 0;}
100% { opacity: 1;}
}
An example : http://jsfiddle.net/zxx8u/1/
http://jsfiddle.net/DerekL/9PfMF/
div{
-webkit-animation: fadein 5s linear 1 normal forwards;
}
#-webkit-keyframes fadein{
from { opacity: 0; }
to { opacity: 1; }
}
You can use jQuery animate instead, very clean and easy to manipulate.
JSFiddle link
<div style="opacity:0;">some text</div>
$("div").animate({opacity: '1'}, 5000);
Something like that works for me:
.chat-messages li{
-webkit-animation: fadein 5s linear 1 normal forwards;
}
#-webkit-keyframes fadein{
0% { opacity: 1;}
90% { opacity: 1;}
100% { opacity: 0;}
}
You can do with simple css3 keyframe animation
demo
<div class="timedelay"></div>
.timedelay {
width: 30px;
height: 30px;
position: absolute;
background-color: red;
-webkit-animation: myanim 5s ease 5s;
}
#-webkit-keyframes myanim {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}