animation can do it ，just：
-webkit-animation-fill-mode: forwards;
but the ‘transition’ ， what can I do let div 'end' in hover state use 'transition'
.div-box{
position: relative;
top:0;
left: 0;
width: 100px;
height: 100px;
background: red;
transition:all 1s linear ;
}
.div-box:hover{
transform: translate(100px,0);
}
You can kind of emulate the behavior you need with the following trick:
.div-box{
position: relative;
top:0;
left: 0;
width: 100px;
height: 100px;
background: red;
transition:all 1s linear 99999s; /* huge delay for non-hovered state! */
}
.div-box:hover{
transform: translate(100px,0);
transition:all 1s linear; /* immediate transition start on hover */
}
Yes, you can do something close to what you are wanting with pure CSS. Add the following to your CSS, it'll run the animation as long as they are hovering over the object, and it will stop once the animation is complete.
.div-box {
-webkit-animation-fill-mode: forwards;
animation-play-state: paused;
}
.div-box:hover {
animation-play-state: running;
}
Related
I have made a strap of hexagon shapes on my website that slowly animate the background color to have a "twinkle" effect. You can see it in action at https://taketwicedailey.com/. I made the hexagon shaped elements using a tutorial I found online. It involves making a rectangle element and then positioning the ::before and ::after options as rhombus shapes at the top and bottom of the rectangle element (If there is a better way, let me know, I am new to web building).
What I then wanted to do is have a forever looping animation of the group of hexagon shapes that changes the background color. Then I wanted to set this animation to start at different times for different elements based on an nth-of-type selector. I developed all of this using Google Chrome, on which it works beautifully with no issues, that you can verify yourself.
The problem comes when you use Firefox. It seems that the animation does not want to be inherited by the ::before and ::after options, which gives a bow-tie looking effect. This seems to have happened in a recent update in Firefox because this was not an issue a while ago. I have tried everything from defining the animation inside the ::before, ::after definition, to using !important flags, but the mechanism behind this apparent bug is far beyond my understanding here.
I included my CSS below, thanks in advance for any help.
.hex-group {
position: absolute;
top: 470px;
left: 60%;
width: 250px;
margin: 0px;
font-size: 0;
text-align: center;
z-index: -5;
overflow: visible;
}
.hex {
display: inline-block;
position: relative;
width: 76px;
height: 43.87862px;
margin: 21.93931px 2px 3.4641px;
z-index: -6;
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before, .hex:after {
content: '';
display: block;
position: absolute;
z-index: -7;
width: 53.74012px;
height: 53.74012px;
transform-origin: 0 0;
transform: scaleY(0.57735) rotate(-45deg);
background-color: inherit !important;
}
.hex:before {
top: 0;
}
.hex:after {
top: 43.87862px;
}
.hex:nth-of-type(4n) {
animation-delay: 0s;
}
.hex:nth-of-type(4n+1){
animation-delay: -5s;
}
.hex:nth-of-type(4n+2){
animation-delay: -10s;
}
#keyframes pulse {
0% {
background-color: var(--main-bg-color);
}
25% {
background-color: #55636e;
}
50% {
background-color: #444;
}
75%{
background-color: var(--main-bg-color);
}
}
I think that this is a legitimate Firefox bug, but for now I have found the following workaround. You can "over-specify" the animation to the ::before and ::after elements like so
.hex {
display: inline-block;
position: relative;
width: 76px;
height: 43.87862px;
margin: 21.93931px 2px 3.4641px;
z-index: -6;
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before, .hex:after {
content: '';
display: block;
position: absolute;
z-index: -5;
width: 53.74012px;
height: 53.74012px;
transform-origin: 0 0;
transform: scaleY(0.57735) rotate(-45deg);
background-color: var(--main-bg-color);
animation-name: pulse;
animation-duration: 15s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: forwards;
}
.hex:before {
top: 0;
}
.hex:after {
top: 43.87862px;
}
.hex:nth-of-type(4n),
.hex:nth-of-type(4n):before,
.hex:nth-of-type(4n):after {
animation-delay: 0s;
}
.hex:nth-of-type(4n+1),
.hex:nth-of-type(4n+1):before,
.hex:nth-of-type(4n+1):after {
animation-delay: -5s;
}
.hex:nth-of-type(4n+2),
.hex:nth-of-type(4n+2):before,
.hex:nth-of-type(4n+2):after {
animation-delay: -10s;
}
#keyframes pulse {
0% {
background-color: var(--main-bg-color);
}
25% {
background-color: #55636e;
}
50% {
background-color: #444;
}
75%{
background-color: var(--main-bg-color);
}
}
I am expecting the following code to animate button on hover.
But this is not working properly -
#button3 {
float: left;
height: 200px;
width: 200px;
}
#button3:hover {
animation: 3s stilius forwards;
-webkit-transition: 3s stilius forwards;}
#keyframes stilius {
100% {border-style: dashed;}}
You need to define an initial state for the border otherwise it won't know how to transition.
For example:
#button3 {
border-style:solid;
border-width: 5px;
border-color:#000;
float: left;
height: 200px;
width: 200px;
}
#button3:hover {
animation: 3s stilius forwards;
-webkit-transition: 3s stilius forwards;
}
#keyframes stilius {
100% {
border-color: #fff;
border-style: dashed;
}
}
Did you add the border property?
You have to add the border property first to animate it
eg:border:5px solid;
If thats not the problem, If you are using browser like mozilla etc use the -moz- and -o- prefixes as well
I am working on a project that calls for multiple animated, moving icons that will stop, expand, and move to position on mouseover. Is there a pure CSS way to get an element to seamlessly start from whatever (mid-animation) position they are at when the hover event begins and transition to the new final keyframe properties, rather than starting from a set initial state?
#keyframes drop {
from {top:-100px;}
to {top:100px;}
}
#keyframes freeze {
to {left:10px; width:700px;}
}
.droptext {
position:absolute;
width: 100px;
height: 100px;
background-color: red;
animation: drop 2s linear infinite;
-webkit-animation: drop 2s linear infinite;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
.droptext:hover {
z-index:99;
-webkit-animation: freeze 2s linear 1s forwards;
-webkit-transition: top:10px;
}
Try this
.droptext:hover {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
You can use animation-play-state: paused to pause the animation and expand the text on :hover with transition. Example:
#keyframes drop {
0% {
top: 0;
left: 0;
}
50% {
top: 200px;
left: 300px;
}
100% {
top: 0;
left: 0;
}
}
.text {
width: 100px;
height: 20px;
position: relative;
padding: 20px;
border: 1px solid #ddd;
left: 0;
overflow: hidden;
white-space: nowrap;
transition: all .5s ease-in-out;
animation: drop 10s linear infinite;
}
.text:hover {
width: 400px;
height: 60px;
animation-play-state: paused;
transform: translate(-20px, 20px);
}
<div class="text">Lorem ipsum dolor sit amet blah blah</div>
I was just trying to create a simple border animation in CSS-3 , but somehow it seems to fail and not work FIDDLE HERE
CODE:
a {
display: inline-block;
margin-top: 4em;
padding: 2em 5em;
background: #eee;
color: #000;
position: relative;
/*width: 120%;*/
}
a:before {
content:'';
position: absolute;
top: 0;
left: 10%;
right: 10%;
height: 5px;
display: block;
background: #c107b4;
}
a:hover:before {
-webkit-animation-delay: .3s;
-o-animation-delay: .3s;
animation-delay: .3s;
-webkit-animation-name: borderanim;
-o-animation-name: borderanim;
animation-name: borderanim;
}
#-moz-keyframes borderanim {
from {
width: 10%;
}
to {
width: 100%;
}
}
#keyframes borderanim {
from {
width: 10%;
}
to {
width: 100%;
}
}
Well if instead of using a custom animation, if i do the following :
a:hover:before {
width: 100%;
left: 0;
right: 0;
-webkit-transition: width 5s;
-o-transition: width 5s;
transition: width 5s;
}
The border animation works(no keyframes used here though.), it works , but there is glinch. I'd prefer a keyframe animation. Can anybody tell me what am i doing wrong ?
Thank you.
Alex-z.
Must assign animation duration to see the change
in your case it animation in 0.0s. Must assign some time to see animation e.g
tag-name
{
animation-name:animate;
animation-duration:2s;
}
#keyframes animate
{
from{background:black;}
to{background:white;}
}
you can use -webkit-animation instead of -webkit-animation-name and give some animation duration.
DEMO
a:hover:before {
-webkit-animation: borderanim 5s;
-o-animation: borderanim 5s;
animation: borderanim 5s; }
I'm trying to show a notification on button click. The button click actually checks for email validation. I know to show a div with content with the error message. However, I would like to fade out the error message, lets say after 5 seconds . I would like to achieve it using CSS. Below is my attempt, it just hides everything. Please advise.
#signup-response{
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #FF0000;
margin-top: 20px;
-webkit-transition: opacity 5s ease-in-out;
-moz-transition: opacity 35s ease-in-out;
-ms-transition: opacity 5s ease-in-out;
-o-transition: opacity 5s ease-in-out;
opacity: 0;
}
You can use animation example.
Set the animation-delay to the time you want. Make sure you use animation-fill-mode: forwards to stop the animation.
#signup-response{
width: 50%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: #FF0000;
margin-top: 20px;
animation:signup-response 0.5s 1;
-webkit-animation:signup-response 0.5s 1;
animation-fill-mode: forwards;
animation-delay:2s;
-webkit-animation-delay:1s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
}
#keyframes signup-response{
from {opacity :1;}
to {opacity :0;}
}
#-webkit-keyframes signup-response{
from {opacity :1;}
to {opacity :0;}
}
Using css3 keyframe animation:
(You'll probably want to add -webkit- -moz-, -ms-, and -o- prefixes on the animation and animation-delay properties inside .error-message and on the keyframes to support older browsers.)
.error-message {
animation: fadeOut 2s forwards;
animation-delay: 5s;
background: red;
color: white;
padding: 10px;
text-align: center;
}
#keyframes fadeOut {
from {opacity: 1;}
to {opacity: 0;}
}
<div class="error-message">
<p>Some random text</p>
</div>
cross browser hack (instead of using css3 animation keyframes):
transition-timing-function: cubic-bezier(1,1,1.0,0);}
-webkit-transition-timing-function: cubic-bezier(1,1,1.0,0);
http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp