What would be the code for a webkit css animation that traces out the border around an element (say a div or a heading) from one corner, around the entire element ending up back at the original corner?
In layman's terms, if someone was drawing a rectangle by pencil in one single line around the element.
The effect must be permanent and not just occur when the user hovers over the element.
Maybe something like this?
#keyframes pencil {
0% {
transition: border-color 0.5s ease-in-out 0.25s;
border-color: #000 #fff #fff #fff;
top:0%;
left: 0%;
}
25% {
transition: border-color 0.5s ease-in-out 0.25s;
border-color: #fff #000 #fff #fff;
top:0%;
right: 100%;
}
50% {
transition: border-color 0.5s ease-in-out 0.25s;
border-color: #fff #fff #000 #fff;
top:100%;
right: 100%;
}
75% {
transition: border-color 0.5s ease-in-out 0.25s;
border-color: #fff #fff #fff #000;
top:100%;
right: 0%;
}
100% {
transition: border-color 0.5s ease-in-out 0.25s;
border-color: #fff #fff #fff #fff;
top:0%;
right: 0%;
}
}
.pencil-border {
border: 2px solid #fff;
animation: pencil 2s infinite linear;
}
<div class="pencil-border">
Test
</div>
Related
I have this SASS code:
.card.job.card-border-color-6:hover .button {
background: #ffdedb;
transition: background 400ms ease-in-out;
}
.card.job.card-border-color-6 .button:hover {
background: hsl(14, 100%, 53%);
color: white;
transition: background 400ms ease-in-out;
}
But I want to make it generic, with some kind of wildcard syntax, something like this:
.card.job.card-border-color-*:hover .button {
background: #ffdedb;
transition: background 400ms ease-in-out;
}
.card.job.card-border-color-* .button:hover {
background: hsl(14, 100%, 53%);
color: white;
transition: background 400ms ease-in-out;
}
However this syntax is not correct, what is the correct way in Sass to write this code to make it generic?
Here I have an animation that makes a blinking border next to the title you're hovering on:
#link_list a:hover {
border-left: 10px solid #E3E3E3;
animation: blink 1s infinite;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-o-animation: blink 1s infinite;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}
#keyframes blink {
0% { border-left: 10px solid rgba(215, 215, 215, 1); }
50% { border-left: 10px solid rgba(215, 215, 215, 0); }
100% { border-left: 10px solid rgba(215, 215, 215, 1); }
}
Now, the problem is that the transition doesn't support the animation.
I already fixed it for the transition-in with the animation-delay property, but the transition-out doesn't work because the animation is running.
FIDDLE
This is a bit of a hack way to do this, but you can accomplish the effect you are looking for with positioning.
Basically, instead of setting the border width to be 0px when the links are not being hovered, set the width to 10px (the same as onHover) and use relative positioning to move the element to the left 10px, as if the border is not there.
Then set the animation of the left property to be 0.2s ease and set left: 0 in the :hover state.
#link_list a{
border-left: 10px solid transparent;
transition: border-left 0.2s ease, border-bottom 0.2s ease, border-right 0.2s ease, left 0.2s ease;
position: relative;
left: -10px;
}
#link_list a:hover {
left: 0px;
}
With this, you can remove the transition-delay as well.
JSFiddle
You should use left: -10px; property instead of transition-delay: 0.2s; animation properties, add this properties into things #link_list a{ },
Check this Demo jsFiddle
CSS
#link_list a{
color: inherit;
text-decoration: none;
border-left: 0px solid transparent;
border-width: 0px;
transition: border-left 0.2s ease, border-bottom 0.2s ease, border-right 0.2s ease;
left: -10px; // ADD THIS NEW
}
how can i get a css transition example like in here (the dropdown example), so far I've managed to only change the text and background color, but not the whole transition effect thing (where the rectangle rolls when hovered and rolls back smoothly when un-hovered), any idea how can i achieve it? here's my code:
a.menulink
{
text-decoration: none;
color: #000000;
background-color: rgb(235,235,185);
-webkit-transition: color .25s linear;
transition: color .25s linear;
transition: background-color .15s linear .1;
}
a.menulink:hover
{
text-decoration: none;
color: #FFFFFF;
background-color: rgb(255,24,24);
-webkit-transition: color .25s linear, background-color .15s linear .1s;
transition: color .25s linear, background-color .15s linear .1s;
}
thank you before
See this Demo
<a href="#" class="linkhover">
<span hover-title="LINK HOVER">LINK HOVER</span>
</a>
.linkhover {
display: inline-block;
overflow: hidden;
perspective: 400px;
-webkit-perspective: 400px;
perspective-origin: 50% 50%;
-webkit-perspective-origin: 50% 50%;
}
.linkhover span {
display: block;
position: relative;
transition: all 500ms ease;
-webkit-transition: all 500ms ease;
transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
}
.linkhover:hover span {
transform: translate3d( 0px, 0px, -35px ) rotateX( 90deg );
-webkit-transform: translate3d( 0px, 0px, -35px ) rotateX( 90deg );
}
.linkhover span:after {
content: attr(hover-title);
display: block;
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
color: white;
background: red;
transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
-webkit-transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
}
Just use this. No need use transition in ":hover" selector.
a.menulink{
text-decoration: none;
color: #000000;
background-color: rgb(235,235,185);
-webkit-transition: color .25s linear;
transition: color .25s linear;
transition: background-color .15s linear .1s;
}
a.menulink:hover
{
text-decoration: none;
color: #FFFFFF;
background-color: rgb(255,24,24);}
The CSS transition on my a tag isn't fading in and out, its just like there's no transition at all! I tried using transition: background 300ms ease-in-out; too but still no luck
CSS:
.FeatureRow a{
padding: 10px;
display: block;
width: 260px;
height: auto;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: 0px 4px 8px #f5f5f5;
-moz-box-shadow: 0px 4px 8px #f5f5f5;
box-shadow: 0px 4px 8px #f5f5f5;
background-image: -moz-linear-gradient(top,#fbfbfb,#ffffff);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fbfbfb),to(#ffffff));
background-image: -webkit-linear-gradient(top,#fbfbfb,#ffffff);
background-image: -o-linear-gradient(top,#fbfbfb,#ffffff);
background-image: linear-gradient(to bottom,#fbfbfb,#ffffff);
background-repeat: repeat-x;
transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
}
.FeatureRow a:hover{
background-image: -moz-linear-gradient(top,#C00,#C0F);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#C00),to(#C0F));
background-image: -webkit-linear-gradient(top,#C00,#C0F);
background-image: -o-linear-gradient(top,#C00,#C0F);
background-image: linear-gradient(to bottom,#C00,#C0F);
}
As Adrift says, this is not supported; you have to simulate it.
This is the CSS
.FeatureRow {
padding: 10px;
display: block;
position: relative;
width: 260px;
height: 70px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background-image: linear-gradient(0deg,white,gray);
}
.FeatureRow:after {
content: '';
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
background-image: linear-gradient(0deg,red,magenta);
opacity: 0;
transition: all 3s ease-in-out;
}
.FeatureRow:hover:after {
opacity: 1;
}
We are overlaying your div with a pseudo element. Each one has a gradient. The pseudo element has opacity set to 0; when you hover it you change the opacity to 1; and this property can be transitioned.
demo
As noted in other answers, it is not possible to animate a gradient. It is however possible to animate background-color. Knowing this, you can layer a transparent gradient on top of a background color, which will allow you to animate one of the colors in your gradient.
To do this, choose the color you want to animate, set it as the background-color, and put rgba(0,0,0,0) (transparent) in its place.
Then all you have to do is on :hover or with javascript change background-color to your desired value
This will only work to transition one color of your gradient. But I think it's still a decent option to transition a gradient
.squareTile {
background: radial-gradient(#203244eb, rgba(0,0,0,0), #203244eb);
background-color: #3596ff;
border-radius: 10px;
width: 100px;
height: 100px;
border: 1px solid black;
cursor: pointer;
transition: 1s;
}
.squareTile:hover {
background-color: #77c577;
}
<div class="squareTile">
</div>
Using gradients for animations (or transitions) is unfortunately not supported by any browser at the moment. Take a look at this list in the Transitions module for a list of all current animatible properties
animating a background gradient is possible, as mentioned, and there's a quite good tool currently up to let you play with the feature:
https://www.gradient-animator.com/
example output:
.css-selector {
background: linear-gradient(270deg, #8ccebd, #146e57);
background-size: 400% 400%;
animation: AnimationName 5s ease infinite;
}
#keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
I've got a div styled to be a circle with an image and some text centered inside of it.
Without hovering, the circle and image are shown while the text is transparent.
When hovering, the circle border starts flashes (webkit animation), the image's opacity is lowered, and the text becomes visible.
When writing/testing this code in Firefox, everything works as desired, but on Chrome, the changes from the hover effect persist and I don't want them to (namely, the image opacity stays lowered, and the text remains visible. Continuing to hover on the div, however, makes the border flash as intended.
I've got all the correct webkit/moz/ms/o transitions and animations, but I can't seem to figure out what's going wrong (or if this is just one of the deficiencies that comes from using Chrome).
My code for the div and all its elements is:
<div class='players'>
<div class='row'>
<div class='span6'>
<div class='matchup'>
<p class='team'>SOMETEAMNAME</p>
<p class='name'>SOMENAME</p>
<img src='SOMEIMAGE'>
</div>
</div>
</div>
</div>
My CSS code:
.matchup {
width: 250px;
height: 250px;
background: transparent;
border: 1px solid #ff6600;
border-radius: 125px;
display: block;
margin-left: auto;
margin-right: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
}
.matchup img {
position: static;
margin-top: -22%;
opacity: 1;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
}
.matchup p {
font-family: 'Lobster', cursive;
position: relative;
text-align: center;
top: 50%;
color: transparent;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
transition: 0.5s ease;
}
.team {
font-size: 25px;
}
.name {
font-size: 45px;
}
.map {
font-size: 15px;
margin-top: -70%;
}
.matchup:hover {
-webkit-animation: matchup-active 1s infinite;
-moz-animation: matchup-active 1s infinite;
-ms-animation: matchup-active 1s infinite;
-o-animation: matchup-active 1s infinite;
animation: matchup-active 1s infinite;
p {
color: #ff6600;
}
img {
opacity: 0.2;
}
}
#-webkit-keyframes matchup-active {
0% {
border: 1px solid #ff6600;
}
50% {
border: 1px solid transparent;
}
100% {
border: 1px solid #ff6600;
}
}
#-moz-keyframes matchup-active {
0% {
border: 1px solid #ff6600;
}
50% {
border: 1px solid transparent;
}
100% {
border: 1px solid #ff6600;
}
}
#-o-keyframes matchup-active {
0% {
border: 1px solid #ff6600;
}
50% {
border: 1px solid transparent;
}
100% {
border: 1px solid #ff6600;
}
}
#keyframes matchup-active {
0% {
border: 1px solid #ff6600;
}
50% {
border: 1px solid transparent;
}
100% {
border: 1px solid #ff6600;
}
}
EDIT:
Updated with a jsfiddle: http://jsfiddle.net/sicophrenic/qvJ94/
It's not styled perfectly (i.e. images and stuff aren't centered), but the problem I'm having shows up (in Chrome and works fine in Firefox).
on .matchup add color:transparent;
on .matchup:hover add color: #ff6600;
on .matchup p add color: inherit;
because .matchup:hover p is not a valid selector.
here is a fiddle