Blockquote
Hi people, i have an image gallery with grid and i want to put an Animista animation when user click on image , i tried to use hover on the class but there is an specificity error.
Blockquote
css:
img :hover{
.scale-up-center {
-webkit-animation: scale-up-center 0.7s cubic-bezier(0.550, 0.055, 0.675, 0.190) both;
animation: scale-up-center 0.7s cubic-bezier(0.550, 0.055, 0.675, 0.190) both;
}
#-webkit-keyframes scale-up-center {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes scale-up-center {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
100% {
-webkit-transform: scale(3);
transform: scale(3);
}
}
}
html :
<div class="grid">div class="modulo">
<div class="producto" data-name="p-9">
<img class="scale-up-center"src="Img/Pastel.jpg" alt="Pastel">
<h3>Pastel</h3>
<div class="info">Las medidas son : alto:47 cm, ancho : 54 cm</div>
</div>
</div>
:hover selector is activated by moving mouse over an element. You need to use focus. To do that tabindex also needs to be set. Here is a demo:
.producto {
overflow: hidden
}
.producto img:focus {
animation: scale-up-center 0.7s cubic-bezier(0.550, 0.055, 0.675, 0.190) backwards;
}
.producto img:active {
animation: none;
}
#keyframes scale-up-center {
0% {
transform: scale(0.5);
}
100% {
transform: scale(3);
}
}
<div class="grid">
<div class="modulo">
<div class="producto" data-name="p-9">
<img tabindex="0" src="https://placekitten.com/100/100" alt="Pastel">
<h3>Pastel</h3>
<div class="info">Las medidas son : alto:47 cm, ancho : 54 cm</div>
</div>
</div>
</div>
Related
I'm wondering if it is possible to reverse a keyframes animation on mouse out after hover without using JavaScript (that's a requirement for a project I'm working on). I have tried animation-direction: alternate; and animation-direction: reverse on the original .molehill selector and on the .molehill:hover > img selector without any luck. See JSFiddle for current status, but essentially the mole is animated to come out of the molehill on hover. When you remove the mouse, he disappears, but I would rather have the animation reverse so it looks like he's slowly going back in.
HTML:
<div class="molehill">
<div>
<img id="m1" src="http://uf.heatherlaude.com/img_directory/molehill-1.png" alt="mole">
</div>
<img id="m2" src="http://uf.heatherlaude.com/img_directory/molehill-2.png" alt="mole">
<img id="m3" src="http://uf.heatherlaude.com/img_directory/molehill-3.png" alt="mole">
<img id="m4" src="http://uf.heatherlaude.com/img_directory/molehill-4.png" alt="mole">
<img id="m5" src="http://uf.heatherlaude.com/img_directory/molehill-5.png" alt="mole">
<img id="m6" src="http://uf.heatherlaude.com/img_directory/molehill-6.png" alt="mole">
<img id="m7" src="http://uf.heatherlaude.com/img_directory/molehill-7.png" alt="mole">
<img id="m8" src="http://uf.heatherlaude.com/img_directory/molehill-8.png" alt="mole">
</div>
CSS:
.molehill {
width: 359px;
height:250px;
position: relative;
}
.molehill > img {
transition: 1s;
}
#m1, #m2, #m3, #m4, #m5, #m6, #m7, #m8 {
position: absolute;
width: 100%
height: 100%;
}
#m2, #m3, #m4, #m5, #m6, #m7, #m8 {
opacity: 0;
}
.molehill:hover > img {
animation-name: molehill_test;
-webkit-animation-name: molehill_test;
animation-duration: 3.25s;
-webkit-animation-duration: 3.25s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
}
#m2 {
animation-delay:.25s;
-webkit-animation-delay:.25s
}
#m3 {
animation-delay:.75s;
-webkit-animation-delay:.75s
}
#m4 {
animation-delay:1.25s;
-webkit-animation-delay:1.25s
}
#m5 {
animation-delay:1.75s;
-webkit-animation-delay:1.75s
}
#m6 {
animation-delay:2.25s;
-webkit-animation-delay:2.25s
}
#m7 {
animation-delay:2.75s;
-webkit-animation-delay:2.75s
}
#m8 {
animation-delay:3.25s;
-webkit-animation-delay:3.25s
}
#keyframes molehill_test {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes molehill_test {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 1;
}
}
Full code on JSFiddle:
https://jsfiddle.net/qmgy4133/
it's possible with the help of jquery
$('#trigger').on({
mouseenter: function() {
$('#item').show();
$('#item').addClass('flipped');
},
mouseleave: function() {
$('#item').removeClass('flipped');
}
});
#trigger {
position: relative;
display: inline-block;
padding: 5px 10px;
margin: 0 0 10px 0;
background: teal;
color: white;
font-family: sans-serif;
}
#item {
position: relative;
height: 100px;
width: 100px;
background: red;
display: none;
-webkit-transform: perspective(350px) rotateX(-90deg);
transform: perspective(350px) rotateX(-90deg);
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
animation: flipperUp 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipperUp 0.7s;
-webkit-animation-fill-mode: forwards;
}
#item.flipped {
animation: flipper 0.7s;
animation-fill-mode: forwards;
-webkit-animation: flipper 0.7s;
-webkit-animation-fill-mode: forwards;
}
#keyframes flipper {
0% {
transform: perspective(350px) rotateX(-90deg);
}
33% {
transform: perspective(350px) rotateX(0deg);
}
66% {
transform: perspective(350px) rotateX(10deg);
}
100% {
transform: perspective(350px) rotateX(0deg);
}
}
#-webkit-keyframes flipper {
0% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
}
#keyframes flipperUp {
0% {
transform: perspective(350px) rotateX(0deg);
}
33% {
transform: perspective(350px) rotateX(10deg);
}
66% {
transform: perspective(350px) rotateX(0deg);
}
100% {
transform: perspective(350px) rotateX(-90deg);
}
}
#-webkit-keyframes flipperUp {
0% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
33% {
-webkit-transform: perspective(350px) rotateX(10deg);
}
66% {
-webkit-transform: perspective(350px) rotateX(0deg);
}
100% {
-webkit-transform: perspective(350px) rotateX(-90deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='trigger'>Hover Me</div>
<div id='item'></div>
this is only example
In my project, when the homepage is opened, it should run a CSS animation so that the cube's faces open. After the animation is complete the faces should be like in the picture (I need to have a result like the first opening in the picture).
This is my code,
.sk-folding-cube {
margin: 20px auto;
width: 40px;
height: 40px;
position: relative;
}
.sk-folding-cube .sk-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
-webkit-animation: sk-foldCubeAngle 2.4s 0.5 linear both;
animation: sk-foldCubeAngle 2.4s 0.5 linear both;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube5 {
-webkit-transform: scale(1.1) rotateZ(360deg);
transform: scale(1.1) rotateZ(360deg);
}
.sk-folding-cube .sk-cube5 {
-webkit-transform: scale(1.1) rotateZ(360deg);
transform: scale(1.1) rotateZ(360deg);
}
.sk-folding-cube .sk-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.sk-folding-cube .sk-cube5:before {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.sk-folding-cube .sk-cube6:before {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#-webkit-keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
#keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
<html>
<head>
<link href="style.css" rel="stylesheet">
<title>Open Cube</title>
<h1>Apertura Cubo</h1>
</head>
<body>
<div class="sk-folding-cube">
<div class="sk-cube1 sk-cube"></div>
<div class="sk-cube2 sk-cube"></div>
<div class="sk-cube4 sk-cube"></div>
<div class="sk-cube3 sk-cube"></div>
</div>
</body>
</html>
How can I do this?
Judging by the description, snippet and the picture provided in question it seems like you are trying to create a flat cube opening animation where each face of the cube opens one by one and ends up with the appearance as shown in the first sample within the picture.
It might be possible to achieve that effect by enhancing your current code but I found it a bit confusing and so went with my own version of a flat-cube.
Explanation:
First create a cube with six faces (one div element for each face). I've made the front face as a child element of the left face element because the front face should eventually get opened on the left hand side of the left face.
Each face is a 50 x 50px square whose transform and transform-origin properties are set in such a way that it creates a cube.
Opening animation is then attached to each of the faces and a delay is added depending on when each face should get opened. In the demo, the right face gets opened first and so it has no delay, the bottom face is opened second and so it has a delay of 1s (equal to the animation time of right face), the top face is opened third and so has a delay of 2s (equal to combined animation time of the previous two faces) and so on.
The back face doesn't have any animation attached because it doesn't need to open at all ;)
.cube {
position: relative;
margin: 100px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
height: 50px;
width: 50px;
transform-style: preserve-3d;
}
.back {
background: rebeccapurple;
}
.right {
background: tomato;
transform: rotateY(90deg);
transform-origin: right;
animation: open-y 1s ease-in-out forwards;
}
.bottom {
background: crimson;
transform: rotateX(270deg);
transform-origin: bottom;
animation: open-x 1s 1s ease-in-out forwards;
}
.top {
background: indianred;
transform: rotateX(90deg);
transform-origin: top;
animation: open-x 1s 2s ease-in-out forwards;
}
.left {
background: yellowgreen;
transform: rotateY(270deg);
transform-origin: left;
animation: open-y 1s 3s ease-in-out forwards;
}
.front {
background: chocolate;
transform: rotateY(270deg);
transform-origin: right;
animation: open-y 1s 3s ease-in-out forwards;
}
#keyframes open-y {
to {
transform: rotateY(180deg);
}
}
#keyframes open-x {
to {
transform: rotateX(180deg);
}
}
<div class="cube">
<div class="back"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="top"></div>
<div class="left">
<div class="front"></div>
</div>
</div>
Note: It is very much possible to achieve a similar effect in other ways also and in addition make them look a lot more realistic but that would most likely involve a good amount of translate transforms, extra keyframe settings for the animations etc - in short, a lot more complex code.
In my project, when the homepage is opened, it should run a CSS animation so that the cube's faces open. After the animation is complete the faces should be like in the picture (I need to have a result like the first opening in the picture).
This is my code,
.sk-folding-cube {
margin: 20px auto;
width: 40px;
height: 40px;
position: relative;
}
.sk-folding-cube .sk-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}
.sk-folding-cube .sk-cube:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
-webkit-animation: sk-foldCubeAngle 2.4s 0.5 linear both;
animation: sk-foldCubeAngle 2.4s 0.5 linear both;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.sk-folding-cube .sk-cube2 {
-webkit-transform: scale(1.1) rotateZ(90deg);
transform: scale(1.1) rotateZ(90deg);
}
.sk-folding-cube .sk-cube3 {
-webkit-transform: scale(1.1) rotateZ(180deg);
transform: scale(1.1) rotateZ(180deg);
}
.sk-folding-cube .sk-cube4 {
-webkit-transform: scale(1.1) rotateZ(270deg);
transform: scale(1.1) rotateZ(270deg);
}
.sk-folding-cube .sk-cube5 {
-webkit-transform: scale(1.1) rotateZ(360deg);
transform: scale(1.1) rotateZ(360deg);
}
.sk-folding-cube .sk-cube5 {
-webkit-transform: scale(1.1) rotateZ(360deg);
transform: scale(1.1) rotateZ(360deg);
}
.sk-folding-cube .sk-cube2:before {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.sk-folding-cube .sk-cube3:before {
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}
.sk-folding-cube .sk-cube4:before {
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}
.sk-folding-cube .sk-cube5:before {
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}
.sk-folding-cube .sk-cube6:before {
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#-webkit-keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
#keyframes sk-foldCubeAngle {
0%, 10% {
-webkit-transform: perspective(140px) rotateX(-180deg);
transform: perspective(140px) rotateX(-180deg);
opacity: 0;
}
25%,
75% {
-webkit-transform: perspective(140px) rotateX(0deg);
transform: perspective(140px) rotateX(0deg);
opacity: 1;
}
90%,
100% {
-webkit-transform: perspective(140px) rotateY(180deg);
transform: perspective(140px) rotateY(180deg);
opacity: 0;
}
}
<html>
<head>
<link href="style.css" rel="stylesheet">
<title>Open Cube</title>
<h1>Apertura Cubo</h1>
</head>
<body>
<div class="sk-folding-cube">
<div class="sk-cube1 sk-cube"></div>
<div class="sk-cube2 sk-cube"></div>
<div class="sk-cube4 sk-cube"></div>
<div class="sk-cube3 sk-cube"></div>
</div>
</body>
</html>
How can I do this?
Judging by the description, snippet and the picture provided in question it seems like you are trying to create a flat cube opening animation where each face of the cube opens one by one and ends up with the appearance as shown in the first sample within the picture.
It might be possible to achieve that effect by enhancing your current code but I found it a bit confusing and so went with my own version of a flat-cube.
Explanation:
First create a cube with six faces (one div element for each face). I've made the front face as a child element of the left face element because the front face should eventually get opened on the left hand side of the left face.
Each face is a 50 x 50px square whose transform and transform-origin properties are set in such a way that it creates a cube.
Opening animation is then attached to each of the faces and a delay is added depending on when each face should get opened. In the demo, the right face gets opened first and so it has no delay, the bottom face is opened second and so it has a delay of 1s (equal to the animation time of right face), the top face is opened third and so has a delay of 2s (equal to combined animation time of the previous two faces) and so on.
The back face doesn't have any animation attached because it doesn't need to open at all ;)
.cube {
position: relative;
margin: 100px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
height: 50px;
width: 50px;
transform-style: preserve-3d;
}
.back {
background: rebeccapurple;
}
.right {
background: tomato;
transform: rotateY(90deg);
transform-origin: right;
animation: open-y 1s ease-in-out forwards;
}
.bottom {
background: crimson;
transform: rotateX(270deg);
transform-origin: bottom;
animation: open-x 1s 1s ease-in-out forwards;
}
.top {
background: indianred;
transform: rotateX(90deg);
transform-origin: top;
animation: open-x 1s 2s ease-in-out forwards;
}
.left {
background: yellowgreen;
transform: rotateY(270deg);
transform-origin: left;
animation: open-y 1s 3s ease-in-out forwards;
}
.front {
background: chocolate;
transform: rotateY(270deg);
transform-origin: right;
animation: open-y 1s 3s ease-in-out forwards;
}
#keyframes open-y {
to {
transform: rotateY(180deg);
}
}
#keyframes open-x {
to {
transform: rotateX(180deg);
}
}
<div class="cube">
<div class="back"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="top"></div>
<div class="left">
<div class="front"></div>
</div>
</div>
Note: It is very much possible to achieve a similar effect in other ways also and in addition make them look a lot more realistic but that would most likely involve a good amount of translate transforms, extra keyframe settings for the animations etc - in short, a lot more complex code.
I have this css :
.yellowText {
color: #FFFF00;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Chrome, Safari, Opera */
transform: rotate(-20deg);
}
.pulse {
-webkit-animation: text-anim;
animation: text-anim 1s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}
#-webkit-keyframes text-anim {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.1); }
100% { -webkit-transform: scale(1); }
}
#keyframes text-anim {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
Then, I apply it to a text :
<p class="yellowText pulse">Some text here</p>
But now, the text is well-animated, without being rotated by -20°... Any idea of what could be wrong ? I believe this is a problem with the transform property not working with the animation one. Also, what I tried was putting the transform inside the #keyframes text-anim, but what this does is just periodically rotating the text, having it perfectly right the rest of the time...
Thanks in advance for your help !
PS : forgive my bad English, I'm French :P
Your #keyframes are overriding you original transform property.
#-webkit-keyframes text-anim {
0% { -webkit-transform: scale(1 rotate(-20deg); }
50% { -webkit-transform: scale(1.1) rotate(-20deg); }
100% { -webkit-transform: scale(1) rotate(-20deg); }
}
#keyframes text-anim {
0% { transform: scale(1) rotate(-20deg); }
50% { transform: scale(1.1) rotate(-20deg); }
100% { transform: scale(1) rotate(-20deg); }
}
I'm relatively new to CSS. I saw a lot of similar topics but I couldn't find a solution to this problem so I'll ask away.
I'm trying to create a photobanner with a keyframe animation where the images scroll to the left and scale with img:hover. The translation transform works fine and the scale transform works fine however, the latter only works if I remove the css for the keyframe animation. How can I get both transformation to work at the same time?
My CSS is as follows:
.photobannerContainer {
margin: 0 auto;
width: 90%;
overflow: hidden;
}
.photobanner {
height: 480px;
width: 8000px; /* To contain all the images end-to-end. */
}
.photobanner img {
height:100%;
transition: all .2s ease;
/*If I remove these lines then the scale transformation will work.*/
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
.photobanner img:hover {
transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
#keyframes bannermove {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-3726px);
}
}
#-moz-keyframes bannermove {
0% {
-moz-transform: translateX(0);
}
100% {
-moz-transform: translateX(-3726px);
}
}
#-webkit-keyframes bannermove {
0% {
-webkit-transform: translateX(0);
}
100% {
-webkit-transform: translateX(-3726px);
}
}
#-ms-keyframes bannermove {
0% {
-ms-transform: translateX(0);
}
100% {
-ms-transform: translateX(-3726px);
}
}
#-o-keyframes bannermove {
0% {
-o-transform: translateX(0);
}
100% {
-o-transform: translateX(-3726px);
}
}
The HTML is set up as follows:
<div class="photobannerContainer">
<div class="photobanner">
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
<img src="url"/>
</div>
</div>
Thank you.
i have the problem today,and i dont know the reason too,but i solved it by add a extra div tag out side animation-div tag,and put transition in the outside div
like:
html
<div class="extra-div">
<div class="animation-div">
</div>
</div>
CSS
.extra-div{
transition: all .2s ease;
}
.extra-div:hover{
transform: scale(1.9);
}
.animation-div {
animation: myAnime 0.2s ease-out
}