My goal to add some animation to the borders of my div elements on one of my web pages.
I'm wondering how I would go about drawing/animating borders for my list of div's on a onHover event.
Is this possible with JQuery or CSS3?
First off, I would recommend you use CSS for animation unless you're working with (very) old browser, and even then generally I would only fall back to JS if the animation is essential to the page.
You can do basic animation with a simple CSS transition:
.example{
border: 2px solid #dd0;
-moz-transition: border linear 1s;
-o-transition: border linear 1s;
-webkit-transition: border linear 1s;
transition: border linear 1s;
}
.example:hover{
border: 2px solid #000
}
<div class="example">This is some text</div>
There are also more complex methods you could try, such as this which uses keyframes to animate a dashed border. Example below (Taken and modified from that tutorial):
.animation-examples {
width: 600px;
height: 120px;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 30px;
font-weight: bold;
font-family: cambria;
color: #69D2E7;
outline: 10px dashed #E0E4CC;
box-shadow: 0 0 0 10px #69D2E7;
}
.animation-examples.one:hover {
animation: 1s animateBorderOne ease infinite;
}
#keyframes animateBorderOne {
0% {
outline-color: #E0E4CC;
box-shadow: 0 0 0 10px #69D2E7;
}
50% {
outline-color: #69D2E7;
box-shadow: 0 0 0 10px #E0E4CC;
}
100% {
outline-color: #E0E4CC;
box-shadow: 0 0 0 10px #69D2E7;
}
}
<div id="animation-examples">
<div class="animation-examples one">
Sample Text
</div>
</div>
A solution is to use css animation. It works essentially on keyframes.
Here's your div :
<div>
What a test.
</div>
Now your css :
div {
border: 3px solid black;
}
div:hover {
animation-duration: 1s;
animation-name: color;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes color {
0% {
border-color: darkred;
}
100% {
border-color: orange;
}
}
This example is widely inspired from one i found (maybe in SO). Fiddle here. More examples here.
Related
The Codepen linked below is where I currently am stuck.
function startHover(e) {
btn.classList.add("btnPlaying")
}
function removeHover(e) {
btn.classList.remove("btnPlaying");
}
const btn = document.querySelector('.btn')
btn.addEventListener("mouseenter", startHover);
btn.addEventListener('transitionend', removeHover);
.btn {
margin-top: 10rem;
padding: 20px 100px;
background-color: rgb(255, 204, 3);
border-radius: 10px;
border-style: none;
box-shadow: 0px 0px 10px black;
color: blue;
border: 4px solid rgb(53, 106, 188);
transition: all 1.07s ease;
}
.btnPlaying {
transform: scale(1.1);
}
<button class="btn">Play!</button>
https://codepen.io/TerrellsCode/pen/zYEyORB
The button grows and shrinks like intended but only does it one time. Look for any pointers on how to make this grow/shrink animation loop infinitely as long as user is hovering over button. Thank You
No need for JavaScript. With CSS Keyframes you can create and run animations. Toggle the animation-play-state with the :hover selector to start and pause the animation.
#keyframes grow-shrink {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
.btn {
margin-top: 10rem;
padding: 20px 100px;
background-color: rgb(255, 204, 3);
border-radius: 10px;
border-style: none;
box-shadow: 0px 0px 10px black;
color: blue;
border: 4px solid rgb(53, 106, 188);
animation-name: grow-shrink;
animation-duration: 1.07s;
animation-timing-function: ease;
animation-fill-mode: backwards;
animation-direction: alternate;
animation-play-state: paused;
animation-iteration-count: infinite;
}
.btn:hover {
animation-play-state: running;
}
<button class="btn">Play!</button>
You dont need javascript to create such animation, use css keyframes and infinite animation.
.btn {
margin-top: 10rem;
padding: 20px 100px;
background-color: rgb(255,204,3);
border-radius: 10px;
border-style: none;
box-shadow: 0px 0px 10px black;
color: blue;
border: 4px solid rgb(53,106,188);
}
.btn:hover {
animation: btnPlaying 1s infinite;
}
#keyframes btnPlaying {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
I want to make a similar page as this one: https://lp.anzi.kr/?page=listeners.
When you hover over a button, it moves up and some text will show with a background.
I try to make this with the following code: https://jsfiddle.net/rcv8b0kh/3/
$button = document.querySelector('button');
$textcontent = document.querySelector('.textcontent');
if ($button.hover) {
$textcontent.classList.add('active')
}
button {
background-color: red;
border-radius: 50%;
width: 10rem;
height: 10rem;
}
button:hover {
box-shadow: 0px 4rem 6rem -2rem rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 2px 40px -10px rgba(0, 0, 0, 0.57);
transform: translateY(-3.5rem);
transition: all .3s ease 0s;
border: none;
}
.textcontent {
visibility: hidden;
}
.active {
visibility: 1;
transform: translateY(-3.5rem);
transition: all .3s ease 0s background-color: black;
color: white
}
<div>
<button>
</button>
<div class="textcontent">
<p>some text</p>
</div>
</div>
I also see people using ::before and ::after for these kind of animations but I don't really know how to implement them here.
Here's a solution with pure CSS and :after pseudo element:
div {
position: relative;
width: 10em;
}
p {
text-align: center;
transform: translateY(4rem);
}
p:after {
content: "";
display: block;
background-color: red;
border-radius: 50%;
width: 10rem;
height: 10rem;
transition: all .3s ease 0s;
transform: translateY(-5rem);
}
div:hover p:after {
transform: translateY(-12rem);
}
<div>
<p>some text</p>
</div>
You seem to be getting confused between javascript and jquery. However, I don't think ($button.hover) would be a valid condition in either.
button = document.querySelector('button');
textcontent = document.querySelector('.textcontent');
button.addEventListener('mouseover', handlerIn)
button.addEventListener('mouseout', handlerOut)
function handlerIn() {
textcontent.classList.add('active')
}
function handlerOut() {
textcontent.classList.remove('active')
}
button {
background-color: red;
border-radius: 50%;
width: 10rem;
height: 10rem;
}
button:hover {
box-shadow: 0px 4rem 6rem -2rem rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 2px 40px -10px rgba(0, 0, 0, 0.57);
transform: translateY(-3.5rem);
transition: all .3s ease 0s;
border: none;
}
.textcontent {
opacity: 0;
transition: opacity 0.2s linear;
}
.active {
opacity: 1;
}
<div>
<button>
</button>
<div class="textcontent">
<p>some text</p>
</div>
</div>
you don't need js to do that its a simple css method
<div>
<button class="hoverbtn" id="hoverbtn">
</button>
<div id="textcontent" class = "textcontent">
<span>some text</span>
</div>
</div>
and here is css to hide and show text
If the second item is directly inside the container:
#hoverbtn:hover > #textcontent { opacity : 1 }
If the second item is next to (after containers closing tag) the container:
#hoverbtn:hover + #textcontent { opacity : 1 }
If the second item is somewhere inside the container:
#hoverbtn:hover #textcontent { opacity : 1 }
If the second item is a sibling of the container:
#hoverbtn:hover ~ #textcontent { opacity : 1 }
so here is your css :
.hoverbtn {
background-color: red;
border-radius: 50%;
width: 10rem;
height: 10rem;
}
.hoverbtn:hover {
box-shadow: 0px 4rem 6rem -2rem rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 2px 40px -10px rgba(0, 0, 0, 0.57);
transform: translateY(-3.5rem);
transition: all 0.3s ease 0s;
border: none;
}
.textcontent {
opacity: 0;
}
.hoverbtn:hover+.textcontent {
opacity: 1;
}
reference : https://stackoverflow.com/a/4502693/6550949
You really shouldn't need Javascript to do this.
I'm not really sure what you're looking for, but I'd use a width / opacity transition on the .textContent (when button is hovered) and it achieves very similar results to the page you have linked.
button {
background-color: red;
border-radius: 50%;
border: none;
width: 10rem;
height: 10rem;
transition: all .3s ease 0s;
}
button:hover {
box-shadow: 0px 3rem 4rem -2rem rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 3rem 4rem -2rem rgba(0, 0, 0, 0.57);
transform: translateY(-3.5rem);
transition: all .3s ease 0s;
border: none;
}
.textcontent p{
width:0px;
opacity:0;
transition: opacity .3s ease 0s;
}
button:hover + .textcontent p{
width:200px;
opacity:1;
transition: all .3s ease 0s;
}
<div>
<button>
</button>
<div class="textcontent">
<p>some text</p>
</div>
</div>
I am pretty new to CSS, JavaScript and HTML so this might be a noob questions. Basically, I want the text highlight and size to change simultaneously. I have this so far:
-webkit-transition: font-size 0.5s;
-moz-transition: font-size 0.5s;
-o-transition: font-size 0.5s;
transition: font-size 0.5s;
}
.hl:before {
content: "";
position: absolute;
bottom: 0;
left: 0px;
height: 65%;
width: 0;
-webkit-transition: width 0.8s, background 2s, font-size 2s;
transition: width 0.8s, background 2s, font-size 2s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transform-origin: left;
transform-origin: left bottom;
overflow: hidden;
z-index: -1;
box-shadow: 2px 0 0 2px rgba(230,249,0,0.15) inset;
border-radius: 3px;
-webkit-transform: skewX(-2deg) rotate(-1.5deg) translateY(0);
transform: skewX(-2deg) rotate(-1.5deg) translateY(0);
background: rgba(0, 204, 82,0.85);
box-shadow: 2px 0 0 2px rgba(0,216,255,0.1) inset;
}
.animate .hl:before {
font-size: 40px;
color: #fc0;
background: rgba(255,85,0,0.65);
height: 100%;
width: 100%;
}
This should be <span class="h1"> highlighted</span>
The js file looks like this:
function highlight_stuff() {
$('html').toggleClass('animate')
}
The text gets highlighted, however it does not change size. I cannot figure out why. Any help is greatly welcome.
You're setting the new font-size on the before pseudo element not the element with the .hl class on it. Try this:
.animate .hl:before {
color: #fc0;
background: rgba(255,85,0,0.65);
height: 100%;
width: 100%;
}
.animate .hl {
font-size: 40px;
}
If you're toggling a class, appending and then removing it from the h1, then the code will look like class = "h1 animate" (not the other way around) or class = h1. If you correct the animate class then the text will enlarge correctly.
in this fiddle, I have manually added the animate class to display enlarged text (I omitted the javascript as I didn't know where or how you were calling the function, but you get the picture)
hope this helps
is there any possibility to synchronize CSS Animation? E.g.,
I have this animation:
#keyframes AnimatedGradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
And I apply it with this class to any element that I want:
.animated-gradient {
background: linear-gradient(270deg, #FC5C7D, #6A82FB, #EB3349, #F45C43, #FF8008, #FFC837, #4CB8C4, #3CD3AD, #24C6DC, #514A9D, #FF512F, #DD2476, #DA22FF, #9733EE, #22c1c3, #fdbb2d);
background-size: 3200% 3200%;
animation: AnimatedGradient 160s linear infinite;
}
If I apply it to the 2 or more elements, e.g., the first one is background (body tag) and the other one is button on hover, so when I hover on it the animation is starting from the start, but I want it to be synchronized with the background. So how can I do that? Preferably using plain JavaScript. Thanks!
Maybe you can make the background of button transparent on hover.
Below snippet might help. In the snippet, I have given a thick border to the button to make the button visible while hovering but you can use different techniques (like clipping or stack button in between divs) which is suitable as per your code.
#keyframes AnimatedGradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
.animated-gradient {
background: linear-gradient(270deg, #FC5C7D, #6A82FB, #EB3349, #F45C43, #FF8008, #FFC837, #4CB8C4, #3CD3AD, #24C6DC, #514A9D, #FF512F, #DD2476, #DA22FF, #9733EE, #22c1c3, #fdbb2d);
background-size: 3200% 3200%;
animation: AnimatedGradient 160s linear infinite;
}
body {
text-align: center;
margin: 0;
padding: 0;
}
.btn {
background-color: #000;
color: #fff;
padding: 10px;
transition-duration: 0.4s;
transition-timing-function: ease;
border-top: solid 25px #fff;
border-bottom: solid 25px #fff;
border-left: solid 150px #fff;
border-right: solid 150px #fff;
margin-top: 50px;
}
.btn:hover {
background-color: transparent;
color: #fff;
transition-duration: 0.4s;
transition-timing-function: ease;
}
<html>
<body class="animated-gradient">
<div>
<button class="btn">Hover Me!</button>
</div>
</body>
</html>
This question already has answers here:
CSS3 animate border color
(4 answers)
Closed 8 years ago.
I have a triangle made in CSS and I want it to slowly transition between two colors without the use of a hover state.
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid $mgrey;
}
I've tried putting something like transition: color 0.3s; but that does not seem to work. Would I have to use JavaScript to achieve the affect I'm after or can it be done in pure CSS?
Thanks.
Using CSS transition, you should set the transition for border-color property instead of the color.
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid red;
transition: border-color 0.2s linear; /* Or border-top-color */
}
WORKING FIDDLE.
Update
I meant without the use of a hover state. So it just slowly
transitions on the page without having to interact with it.
According to your update, you could use CSS3 animations (as #arty suggested) to animate the border-color:
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid red;
animation: borderColor 2s forwards;
}
#keyframes borderColor
{
0% {border-top-color: red;}
100% {border-top-color: gold;}
}
UPDATED DEMO.
Or use JavaScript to add a .hover class to the element and use the transition approach as follows:
.arrow-down {
transition: border-color 2s; /* Or border-top-color */
}
.arrow-down.hover {
border-top-color: gold;
}
Using jQuery .addClass method:
$('.arrow-down').addClass('hover');
UPDATED DEMO.