Here is my code:
.dropdown:hover .arrow4{
-webkit-animation: spin 0.3s linear;
-moz-animation: spin 0.3s linear;
-o-animation: spin 0.3s linear;
-ms-animation: spin 0.3s linear;
animation-fill-mode: forwards;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(90deg); }
}
This works very well for spinning the arrow 90 degrees then staying, but when I hover off it snaps back into place as opposed to rotating back.
You can use the following on the default style
transform: rotate(0deg);
transition: 0.3s;
and the following on the hover state
transform: rotate(90deg);
transition: 0.3s;
Example here: https://jsfiddle.net/dt98evye/
use animation-fill-mode:both;
this will run the animation in both directions.
Related
This question already has answers here:
How to have multiple CSS transitions on an element?
(9 answers)
Play multiple CSS animations at the same time
(6 answers)
Closed 1 year ago.
I'd like to apologise upfront for my code and question. I'm a graphic designer but have been editing some html for online digital banners.
Currently I have a colored bar slide in from the left to the right after 2 secs.
This works well using 'animation-name:barAnim'
Then I want that same bar to fade out after 7.5 secs.
However once I add 'animation-name:fadeOut' the bar breaks and only flashes at the 7.5 second mark.
All of this needs to work automatically without any user input.
Please see current code below.
Any help would be really really appreciated.
.col_bar1 {
left: 0px;
top: 412px;
width: 132px;
height: 11px;
background: #5d7773;
opacity: 0;
}
.col_bar1 {
animation-name: barAnim;
-webkit-animation-name: barAnim;
animation-duration: 0.5s;
-webkit-animation-duration: 0.5s;
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-delay: 2s;
-webkit-animation-delay: 2s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.col_bar {
animation-name: fadeOut;
-webkit-animation-name: fadeOut;
animation-duration: 0.2s;
-webkit-animation-duration: 0.2s;
animation-timing-function: ease-in-out;
-webkit-animation-timing-function: ease-in-out;
animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes barAnim {
0% {
-webkit-transform: translate3d(-130px, 0, 0);
transform: translate3d(-130px, 0, 0);
opacity: 1;
}
100% {
opacity: 1;
-webkit-transform: translate3d(18px, 0, 0);
transform: translate3d(18px, 0, 0);
}
}
#-webkit-keyframes barAnim {
0% {
-webkit-transform: translate3d(-130px, 0, 0);
transform: translate3d(-130px, 0, 0);
opacity: 1;
}
100% {
opacity: 1;
-webkit-transform: translate3d(18px, 0, 0);
transform: translate3d(18px, 0, 0);
/*--start from lhs--*/
}
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
<div class="col_bar1"></div>
You can do comma separated animations. I have used the animation shorthand here and split it to multiple lines for readability.
CSS
animation:
barAnim 0.5s ease-out 2s forwards,
fadeOut 0.2s ease-in-out 7.5s forwards;
-webkit-animation:
barAnim 0.5s ease-out 2s forwards,
fadeOut 0.2s ease-in-out 7.5s forwards;
I want to apply floating effect to some texts. I tried it using marquee.
.bounce {
height: 50px;
overflow: hidden;
position: relative;
}
.bounce p {
position: absolute;
width: 50%;
margin: 0;
line-height: 50px;
text-align: center;
color: #FFF;
opacity: 0.7;
-moz-transform: translateX(50%);
-webkit-transform: translateX(50%);
transform: translateX(50%);
-moz-animation: bouncing-text 25s linear infinite alternate;
-webkit-animation: bouncing-text 25s linear infinite alternate;
animation: bouncing-text 25s linear infinite alternate;
}
#keyframes bouncing-text {
0% {
-moz-transform: translateX(50%);
-webkit-transform: translateX(50%);
transform: translateX(50%);
}
100% {
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
<div class="bounce">
<p>SOFT LANDSCAPING</p>
<br />
<p>HARD LANDSCAPING</p>
<br />
</div>
This is for bouncing. I want to make the text float like in the water.
Please help me to find a solution. If any other way please let me know.
You can achieve this using css3 animation-name property.
HTML:
<div class="floating">
Floating effect like water
</div>
CSS :
.floating {
-webkit-animation-name: Floatingx;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-moz-animation-name: Floating;
-moz-animation-duration: 3s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 5px;
}
#-webkit-keyframes Floatingx {
from {-webkit-transform:translate(0, 0px);}
65% {-webkit-transform:translate(0, 15px);}
to {-webkit-transform: translate(0, -0px);}
}
#-moz-keyframes Floating {
from {-moz-transform:translate(0, 0px);}
65% {-moz-transform:translate(0, 15px);}
to {-moz-transform: translate(0, -0px);}
}
Here is working fiddle.
For more on how animation-name works, check this out : animate-name property.
You could do it with hover.css. You have to use the code from the :hover selector and add it to the element's style itself to make it work.
.hvr-bob {
-webkit-animation-name: hvr-bob-float, hvr-bob;
animation-name: hvr-bob-float, hvr-bob;
-webkit-animation-duration: .3s, 1.5s;
animation-duration: .3s, 1.5s;
-webkit-animation-delay: 0s, .3s;
animation-delay: 0s, .3s;
-webkit-animation-timing-function: ease-out, ease-in-out;
animation-timing-function: ease-out, ease-in-out;
-webkit-animation-iteration-count: 1, infinite;
animation-iteration-count: 1, infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-direction: normal, alternate;
animation-direction: normal, alternate;
}
Check the JSFiddle. Don't forget to add hover.css / hover-min.css.
I would like to make a simple animation, when the page loads, my logo should animate from the left side of the box to the right side. I have tried many versions, but haven't succeeded yet.
HTML
<body>
<div>
<img src="logo.png" alt="logo" style="width:170px;height:120px;">
</div>
</body>
CSS
div
{
width:640px;
height:175px;
background:blue;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
position:absolute;
}
div img
{
-webkit-transform: translate(3em,0);
-moz-transform: translate(3em,0);
-o-transform: translate(3em,0);
-ms-transform: translate(3em,0);
}
Try using keyframes.
div {
width: 50px;
height: 40px;
background: blue;
position: relative;
left: 500px;
-webkit-animation: slideIn 2s forwards;
-moz-animation: slideIn 2s forwards;
animation: slideIn 2s forwards;
}
#-webkit-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#-moz-keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
#keyframes slideIn {
0% {
transform: translateX(-900px);
}
100% {
transform: translateX(0);
}
}
<div></div>
You need to use animation instead of transition. Transition effects are triggered on certain events, for example a click which adds a class or a hover.
div img {
animation: example 1s ease-in-out forwards;
}
#keyframes example {
from {transform: transition(0,0)}
to {transform: transition(3em,0)}
}
Now you would of course have to add the prefixes for that, webkit, moz, etc.
For basic knowledge about keyframe animation in css3:
http://www.w3schools.com/css/css3_animations.asp
I've set up an animation for a certain div.
.Animation
{
-webkit-animation-fill-mode: both; /*and also -moz, -ms etc. */
animation-fill-mode: both;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes scaleAnimation /*and also -moz, -ms etc. */
{
0%
{
opacity: 0;
-webkit-transform: scale(2);
}
100%
{
opacity: 1;
-webkit-transform: scale(1);
}
}
.ScaleAnimation
{
-webkit-animation-name: scaleAnimation; /*and also -moz, -ms etc. */
animation-name: scaleAnimation;
}
But i want a different custom ease (cubic bezier) for the opacity and another custom ease for the transform. How do I get this to work.
The following didn't work:
transition: opacity 1s ease-in-out;
transition: scale 1s ease-in-out;
So it definitely won't work with a custom ease, cubic-bezier(0.555, -0.130, 0.270, 1.075); for example.
Any thoughts? :)
For transitions, you could specify multiple transitions by comma-separating those.
transition: <duration> <property> <delay> <timing-function>, ....
transition: 1s opacity 1s ease-in-out, 1s scale 1s linear;
If you want to go the animation/keyframe route, then you could create two animation keyframes. One for scale, and the other for opacity. And then comma-separate them in the animation setup for the element.
The property for easing is animation-timing-function. For webkit based browsers (as it seems from your question that you don't mind vendor prefixes), it becomes -webkit-animation-timing-function.
You could set it up like this snippet:
div {
width: 120px; height: 120px;
background-color: red;
display: inline-block;
}
div.d1 {
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 2s, 2s;
-webkit-animation-duration: 2s, 2s;
-webkit-animation-name: scaleAnimation, opacityAnimation;
-webkit-animation-timing-function:
cubic-bezier(0.1, 0.7, 1.0, 0.1), ease-in;
}
div.d2 {
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 2s, 2s;
-webkit-animation-duration: 2s, 2s;
-webkit-animation-name: scaleAnimation, opacityAnimation;
-webkit-animation-timing-function: linear linear;
}
#-webkit-keyframes scaleAnimation {
0% {
-webkit-transform: scale(2);
}
100% {
-webkit-transform: scale(1);
}
}
#-webkit-keyframes opacityAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="d1">D1</div>
<div class="d2">D2</div>
Fiddle: http://jsfiddle.net/abhitalks/3y7pcd1t/1/
.
HTML
<div class="photos">
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
.............
</div>
CSS
.photos img:hover {
-webkit-transform: rotate(360deg) scale(1.5);
-moz-transform: rotate(360deg) scale(1.5);
-o-transform: rotate(360deg) scale(1.5);
transform: rotate(360deg) scale(1.5);
z-index: 10;}
why is the above CSS rotate property applied only to p1.jpg ?
Because you're only hovering on p1.jpg the CSS selector will only be fired on the image you are hovering.
If you just wan't each image to rotate seperatly, add these lines to your css.
-webkit-transition: all 1.2s linear;
-moz-transition: all 1.2s linear;
-o-transition: all 1.2s linear;
-ms-transition: all 1.2s linear;
transition: all 1.2s linear;
Unfortunately, what you're asking for will require some JavaScript to make happen.
Rotate works. Angle of 360 degrees brings the image in the same position. Use transform with transition or change the angle value.
So, your code will be something like:
.photos img {
-webkit-transition: -webkit-transform 1.2s linear;
-moz-transition: -moz-transform 1.2s linear;
-o-transition: -o-transform 1.2s linear;
-ms-transition: -ms-transform 1.2s linear;
transition: transform 1.2s linear;
overflow:hidden;
}
.photos img:hover {
-webkit-transform: rotate(360deg) scale(1.5);
-moz-transform: rotate(360deg) scale(1.5);
-o-transform: rotate(360deg) scale(1.5);
-ms-transform: rotate(360deg) scale(1.5);
transform: rotate(360deg) scale(1.5);
z-index: 10;
}
this link can help you..
.elem{
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
}
.elem:hover {
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
#-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
#-moz-keyframes rotate {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
There was no issue with your code. The rotate was working on all the elements of the div. The only reason you could not see it was because you did not have a delay or duration for the 'transformation'.
I have used the same code that 'Dragos Sandu' has used. Only change I suggest is the "ease-in-out" for the duration. specially when the change is only 1.2 seconds. This make the change "easy on the eye".
CSS
.photos img:hover {
transform: rotate(360deg) scale(1.5);
-webkit-transform: rotate(360deg) scale(1.5);
-moz-transform: rotate(360deg) scale(1.5);
-o-transform: rotate(360deg) scale(1.5);
z-index: 10;
-webkit-transition: all 1.2s ease-in-out;
-moz-transition: all 1.2s ease-in-out;
-o-transition: all 1.2s ease-in-out;
-ms-transition: all 1.2s ease-in-out;
}
Working Demo