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>
Related
i was wondering how to make a circle that transforms into a wider box in html/css.
I have tried this but it does not transform properly
If you guys have any ideas on how to make this, i would really appreaciate it very much thank you!
.circle{
width: 700px;
height:700px;
margin:0 auto;
background-color: #14b1e7;
animation-name: stretch;
animation-duration:6s;
animation-timing-function:ease-out;
animation-delay:0s;
animation-duration:alternate;
animation-iteration-count: 1;
animation-fill-mode:forwards;
animation-play-state: running;
opacity: 100%;
text-align: center;
text-shadow: 5px;
font-size: 60px;
font-weight: bold;
border-radius: 30px;
}
#keyframes stretch {
0%{
transform: scale(.1);
background-color:#14b1e7;
border-radius: 100%;
}
50%{
background-color: #14b1e7;
}
100%{
transform:scale(.7);
background-color: #14b1e7;
}
}
Here's a live example: https://codesandbox.io/s/interesting-https-yhtpoe?file=/src/styles.css
.circle {
width: 100px;
border-radius: 50%;
transition: all 1s;
}
.circle:hover {
border-radius: 0;
width: 200px;
}
In the example, the circle initially has 50% border-radius and 100px width. On hover, border-radius is set to 0 and width to 200px. Because of the transition property, the change is animated.
The transition: all 1s property makes every property change gradually and last for 1 second. Check the docs for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
You can simply change border-radius according to the keyframes.
.animation {
margin: 0 auto;
margin-top: 20px;
width: 100px;
height: 100px;
background-color: black;
border: 1px solid #337ab7;
border-radius: 100% 100% 100% 100%;
animation: circle-to-square 1s .83s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}
#keyframes circle-to-square {
0% {
border-radius:100% 100% 100% 100%;
background:black;
}
25% {
border-radius:75% 75% 75% 75%;
background:black;
}
50% {
border-radius:50% 50% 50% 50%;
background:black;
}
75% {
border-radius:25% 25% 25% 25%;
background:black;
}
100% {
border-radius:0 0 0 0;
background:black;
}
<div class="container animated zoomIn">
<div class="row">
<div class="animation"></div>
</div>
</div>
I have a div containing a button that has some continues animation on it, not just on hover, the whole button is just animated. Then I have a "LOAD MORE" button beneath it, using JavaScript it would load the next div which contains exactly the same button (with animation). Problem is since the 2nd div is display:none till the load more button is clicked, the animation starts at the time the load more button is clicked and therefore becomes inconsistent the the animation of the same button above it. I guess the question is, how do I keep my CSS animation playing in the background of the display:none div so that when its loaded the animation starts at the same time and matches the shown button?
here is a direct link to where the issue is happening, please click LOAD MORE and notice the difference that happens in the CSS animation: LINK TO ISSUE (LIVE)
please see the link above // the first 4 buttons are set to be visible, so the CSS animation on them are consistent. When I click LOAD MORE, the 5th button with was in div with display:none is now visible but starts the CSS animation at different time!! how do I have it load at the same time?
$(document).ready(function() {
$(".content").slice(0, 4).show();
$("#loadMore").on("click", function(e) {
e.preventDefault();
$(".content:hidden").slice(0, 1).slideDown();
if ($(".content:hidden").length == 0) {
$("#loadMore").text("End of Content").addClass("noContent");
}
});
})
* {
font-family: 'Exo 2', sans-serif;
}
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-90deg, #F04A30, #F04A30, #303e48, #303e48);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
font-family: 'Exo 2', sans-serif;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
.backdrop {
-moz-box-shadow: 0px 6px 5px #111;
-webkit-box-shadow: 0px 6px 5px #111;
box-shadow: 0px 2px 10px #111;
background-color: #131d27 !important;
}
.linktree {
background-color: #131d27 !important;
width: 120px;
height: 120px;
background-image: url("https://www.moenagy.dev/assets/images/moeSplash.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.content {
padding: 10px;
display: none;
}
#loadMore {
width: 200px;
color: #000;
font-weight: bold;
display: block;
text-align: center;
margin: 20px auto;
padding: 10px;
border-radius: 0px;
border: 1px solid transparent;
background-color: #FFF;
transition: .3s;
}
#loadMore:hover {
color: #000;
background-color: #fff;
border: 1px solid darkslategrey;
text-decoration: none;
}
.loadButton {
padding-bottom: 10px;
}
.noContent {
color: #000 !important;
background-color: transparent !important;
pointer-events: none;
}
/*
* Animated CSS button
*/
.animated-button1 {
background: linear-gradient(-30deg, transparent 50%, transparent 50%);
padding: 20px 40px;
margin: 12px;
display: inline-block;
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
overflow: hidden;
color: #FFF;
font-size: 20px;
letter-spacing: 2.5px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
-webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
width: 80%!important;
}
.animated-button1::before {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #ad8585;
opacity: 0;
-webkit-transition: .2s opacity ease-in-out;
transition: .2s opacity ease-in-out;
}
.animated-button1:hover::before {
opacity: 0.2;
}
a:hover {
color: #000;
text-decoration: none;
}
.animated-button1 span {
position: absolute;
}
.animated-button1 span:nth-child(1) {
top: 0px;
left: 0px;
width: 100%;
height: 2px;
background: -webkit-gradient(linear, right top, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to left, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateTop linear infinite;
animation: 2s animateTop linear infinite;
visibility: visible;
}
#keyframes animateTop {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
.animated-button1 span:nth-child(2) {
top: 0px;
right: 0px;
height: 100%;
width: 2px;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to top, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateRight linear -1s infinite;
animation: 2s animateRight linear -1s infinite;
visibility: visible;
}
#keyframes animateRight {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
.animated-button1 span:nth-child(3) {
bottom: 0px;
left: 0px;
width: 100%;
height: 2px;
background: -webkit-gradient(linear, left top, right top, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to right, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateBottom linear infinite;
animation: 2s animateBottom linear infinite;
visibility: visible;
}
#keyframes animateBottom {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
.animated-button1 span:nth-child(4) {
top: 0px;
left: 0px;
height: 100%;
width: 2px;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to bottom, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateLeft linear -1s infinite;
animation: 2s animateLeft linear -1s infinite;
visibility: visible;
}
#keyframes animateLeft {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="col-xs-12">
<div class="text-center" style="padding-top: 30px; padding-bottom: 30px;">
<img class="backdrop linktree">
<h2 style="color: #ffffff; padding-top: 20px;">Custom LinkTree :)</h2>
</div>
</div>
</div>
<div class="container">
<div class="col-xs-12">
<div class="text-center">
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 1
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 2
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 3
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 4
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 5
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 6
</a>
</div>
</div>
</div>
<div class="loadButton">
Load More
</div>
</div>
Above is the JS I'm using, so it basically shows the first 4 and then the rest would load. if I use opacity 0 for .content class it will hide them all !!
I've re-implemented using a class, so now the elements are on the page all the time, but only show on click. I've left as much of the original code as I could.
$(document).ready(function() {
$(".content").slice(0, 4).addClass('show');
$("#loadMore").on("click", function(e) {
e.preventDefault();
$(".content:not(.show)").slice(0, 1).addClass('show').slideDown();
if ($(".content.show").length == 0) {
$("#loadMore").text("End of Content").addClass("noContent");
}
});
})
* {
font-family: 'Exo 2', sans-serif;
}
body {
width: 100wh;
height: 90vh;
color: #fff;
background: linear-gradient(-90deg, #F04A30, #F04A30, #303e48, #303e48);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;
font-family: 'Exo 2', sans-serif;
}
#-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
.backdrop {
-moz-box-shadow: 0px 6px 5px #111;
-webkit-box-shadow: 0px 6px 5px #111;
box-shadow: 0px 2px 10px #111;
background-color: #131d27 !important;
}
.linktree {
background-color: #131d27 !important;
width: 120px;
height: 120px;
background-image: url("https://www.moenagy.dev/assets/images/moeSplash.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.content {
padding: 10px;
width:0px;
height:0px;
}
.content a {
padding: 0;
}
.show {
width:unset;
height:unset;
}
.content.show a {
padding: 20px 40px;
}
#loadMore {
width: 200px;
color: #000;
font-weight: bold;
display: block;
text-align: center;
margin: 20px auto;
padding: 10px;
border-radius: 0px;
border: 1px solid transparent;
background-color: #FFF;
transition: .3s;
}
#loadMore:hover {
color: #000;
background-color: #fff;
border: 1px solid darkslategrey;
text-decoration: none;
}
.loadButton {
padding-bottom: 10px;
}
.noContent {
color: #000 !important;
background-color: transparent !important;
pointer-events: none;
}
/*
* Animated CSS button
*/
.animated-button1 {
background: linear-gradient(-30deg, transparent 50%, transparent 50%);
padding: 20px 40px;
margin: 12px;
display: inline-block;
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
overflow: hidden;
color: #FFF;
font-size: 20px;
letter-spacing: 2.5px;
text-align: center;
text-transform: uppercase;
text-decoration: none;
-webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
width: 80%!important;
}
.animated-button1::before {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #ad8585;
opacity: 0;
-webkit-transition: .2s opacity ease-in-out;
transition: .2s opacity ease-in-out;
}
.animated-button1:hover::before {
opacity: 0.2;
}
a:hover {
color: #000;
text-decoration: none;
}
.animated-button1 span {
position: absolute;
}
.animated-button1 span:nth-child(1) {
top: 0px;
left: 0px;
width: 100%;
height: 2px;
background: -webkit-gradient(linear, right top, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to left, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateTop linear infinite;
animation: 2s animateTop linear infinite;
visibility: visible;
}
#keyframes animateTop {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
.animated-button1 span:nth-child(2) {
top: 0px;
right: 0px;
height: 100%;
width: 2px;
background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to top, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateRight linear -1s infinite;
animation: 2s animateRight linear -1s infinite;
visibility: visible;
}
#keyframes animateRight {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
.animated-button1 span:nth-child(3) {
bottom: 0px;
left: 0px;
width: 100%;
height: 2px;
background: -webkit-gradient(linear, left top, right top, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to right, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateBottom linear infinite;
animation: 2s animateBottom linear infinite;
visibility: visible;
}
#keyframes animateBottom {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
}
.animated-button1 span:nth-child(4) {
top: 0px;
left: 0px;
height: 100%;
width: 2px;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 8, 8, 0)), to(#d92626));
background: linear-gradient(to bottom, rgba(43, 8, 8, 0), #d92626);
-webkit-animation: 2s animateLeft linear -1s infinite;
animation: 2s animateLeft linear -1s infinite;
visibility: visible;
}
#keyframes animateLeft {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="col-xs-12">
<div class="text-center" style="padding-top: 30px; padding-bottom: 30px;">
<img class="backdrop linktree">
<h2 style="color: #ffffff; padding-top: 20px;">Custom LinkTree :)</h2>
</div>
</div>
</div>
<div class="container">
<div class="col-xs-12">
<div class="text-center">
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 1
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 2
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 3
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 4
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 5
</a>
</div>
<div class="content">
<a href="#" class="animated-button1">
<span></span>
<span></span>
<span></span>
<span></span> LINK # 6
</a>
</div>
</div>
</div>
<div class="loadButton">
Load More
</div>
</div>
I have created a website for video games. While testing, I noticed there was some inconsistencies between browsers when I hovered over a button. Firefox Quantum seems to be able to color both the FontAwesome GitHub icon, and the text at the same time, while Chrome cant. Both browsers are being run on the latest versions. My question is, what is causing this, and what can I do to prevent this?
* {
font-family: sans-serif;
transition: all 0.7s !important;
}
.button {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 40px;
border: solid 2px;
text-align: center;
font-size: 18px;
border-color: antiquewhite;
padding: 8px;
width: auto;
cursor: pointer;
margin: 5px;
outline: none;
box-shadow: 0 0 10px 0 #D3D3D3;
color: white;
}
.button:hover {
box-shadow: 0 0 16px 0 #051428;
background-color: #faebd7;
color: #051428;
}
.bg-gradient {
background: linear-gradient(225deg, #4467ae, #449fae, #44ae8e, #9eae44, #ae7844, #ae4444, #ae4497, #7544ae);
background-size: 1600% 1600%;
-webkit-animation: gradient 40s ease infinite;
-moz-animation: gradient 40s ease infinite;
-o-animation: gradient 40s ease infinite;
animation: gradient 40s ease infinite;
}
.fg-white {
color: #ffffff;
}
.center-text {
text-align: center;
}
.fade-in {
animation: fade 1.2s
}
#-webkit-keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#-moz-keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#-o-keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body class="bg-gradient fg-white center-text">
<div class="fade-in">
<h1>Website</h1>
<p>
Hover over the button and you will see the issue.
</p>
<button class="button" onclick="redirectToSite('https://github.com/Frontear/gameSite')"><i class="fa fa-github" aria-hidden="true"></i> GitHub</button>
</div>
</body>
Ok, it seems that when you did set the transition to all elements in the beginning of your css you caused this behavior. I've just change the beginning of your css to:
CSS:
* {
font-family: sans-serif;
}
.button {
border-radius: 40px;
border: solid 2px;
text-align: center;
font-size: 18px;
border-color: antiquewhite;
padding: 8px;
width: auto;
cursor: pointer;
margin: 5px;
outline: none;
box-shadow: 0 0 10px 0 #D3D3D3;
color: white;
transition: all 0.7s;
}
Apparently, the event was propagating to the icon with a 0.7s delay, because the transition was applied to both the button and the icon.
The updated fiddle:
https://jsfiddle.net/pffrmLpm/6/
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.
This is a very simple background color change animation. Is it possible to do that using pure CSS3?
var square = document.querySelector('.square');
var percentYellow = 0;
function changeBackground(){
percentYellow = percentYellow + 10;
square.style.background = 'linear-gradient(90deg, yellow '+percentYellow+'%, blue 0)';
if(percentYellow<=100){
setTimeout(changeBackground,200);
}
}
changeBackground();
.square{
width:300px;
height:300px;
background:linear-gradient(90deg, yellow 0%, blue 0);
border:1px solid;
}
<div class="square"></div>
You can animate the background-position:
.square {
width: 300px;
height: 300px;
background: linear-gradient(90deg, yellow 50%, blue 0);
background-size: 200% 100%;
background-position: 100% 0;
border: 1px solid;
animation: slideBG 2s linear forwards;
}
#keyframes slideBG {
0% {
background-position: 100% 0;
}
100% {
background-position: 0 0;
}
}
<div class="square"></div>
Or, as #Harry pointed out, you can use steps() to maintain the "stepped" transition that your javascript version produces:
.square {
width: 300px;
height: 300px;
background: linear-gradient(90deg, yellow 50%, blue 0);
background-size: 200% 100%;
background-position: 100% 0;
border: 1px solid;
animation: slideBG 2s steps(10, end) forwards;
}
#keyframes slideBG {
to {
background-position: 0 0;
}
}
<div class="square"></div>
Yes, it's possible. You can make the .square element blue, and ::after pseudo-element yellow, and then animate the width of ::after:
#keyframes animation {
from {
width: 0;
}
to {
width: 300px;
}
}
.square {
width: 300px;
height: 300px;
background-color: blue;
border: 1px solid;
}
.square::after {
content: "";
display: block;
width: 300px;
height: 300px;
background-color: yellow;
animation: animation 1s;
}
<div class="square"></div>
You can use css animation and you need to set animation-fill-mode: forwards; to retain the final animation style otherwise it will rollback to the initial style.
animation-fill-mode: forwards -The target will retain the computed values set by the last keyframe encountered during execution.(Taken from here)
.square {
width: 300px;
height: 300px;
background: linear-gradient(90deg, yellow 0%, blue 0);
border: 1px solid;
animation: anim 2s;
animation-fill-mode: forwards; /* retain the css applied by animation */
}
#keyframes anim {
0% { background: linear-gradient(90deg, yellow 0%, blue 0); }
10% { background: linear-gradient(90deg, yellow 10%, blue 0); }
20% { background: linear-gradient(90deg, yellow 20%, blue 0); }
30% { background: linear-gradient(90deg, yellow 30%, blue 0); }
40% { background: linear-gradient(90deg, yellow 40%, blue 0); }
50% { background: linear-gradient(90deg, yellow 50%, blue 0); }
60% { background: linear-gradient(90deg, yellow 60%, blue 0); }
70% { background: linear-gradient(90deg, yellow 70%, blue 0); }
80% { background: linear-gradient(90deg, yellow 80%, blue 0); }
90% { background: linear-gradient(90deg, yellow 90%, blue 0); }
100% { background: linear-gradient(90deg, yellow 100%, blue 0); }
}
<div class="square"></div>
Try something like this
.contain{
width:400px;
height:400px;
border:solid 1px black;
background-color:blue;
position:relative;
}
.overcontain{
width:100%;
height:100%;
background-color:yellow;
animation:anime 2s linear;
position:absolute;
}
#keyframes anime{
0%{width:0%;}
100%{width:100%;}
}
<div class="contain">
<div class="overcontain"></div>
</div>
It can be done with CSS only
.square{
width:300px;
height:300px;
background:linear-gradient(90deg, yellow 0%, blue 0);
border:1px solid;
animation-name: slide;
animation-duration: 4s;
}
#keyframes slide {
0% { background:linear-gradient(90deg, yellow 0%, blue 0); }
10% { background:linear-gradient(90deg, yellow 10%, blue 0); }
20% { background:linear-gradient(90deg, yellow 20%, blue 0); }
/* and so on ... */
100% { background:linear-gradient(90deg, yellow 100%, blue 0); }
}
http://codepen.io/anon/pen/pyMYWz?editors=1100#anon-signup
Edit: Others has beaten me and answered while I was typing this, but since I included a link to a documentation that nobody else mentioned I'm going to post this anyway.
You can create animations using only CSS3 with the #keyframes rules and animation-* properties.
See http://www.w3schools.com/css/css3_animations.asp for reference.
Here is a little snippet:
<!DOCTYPE html>
<html>
<head>
<style>
.square{
width:100px;
height:100px;
background:linear-gradient(90deg, yellow 0%, blue 0%);
border:1px solid;
animation-name: example;
animation-duration: 4s;
}
#keyframes example {
0% {background:linear-gradient(90deg, yellow 0%, blue 0%)}
25% {background:linear-gradient(90deg, yellow 25%, blue 0%)}
50% {background:linear-gradient(90deg, yellow 50%, blue 0%)}
75% {background:linear-gradient(90deg, yellow 75%, blue 0%)}
100% {background:linear-gradient(90deg, yellow 100%, blue 0%)}
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
Note: There is a mess regarding vendors with these properties/rules and due that I couldn't get it working (tried it on Firefox 44). And to keep it simple I used only the default sintax. I hope it can shed some light on this at least.
Edit: Possibly I couldn't get it working due the fact mentioned in comments here.
You can just set how many steps you want to realize.
.square{
width:300px;
height:300px;
background:blue;
border:1px solid;
position: relative;
}
.square:before{
content: '';
display: block;
position: absolute;
background: yellow;
display:block;
left: 0;
top:0;
bottom:0;
right: 100%;
-webkit-animation: play 2s steps(10);
-moz-animation: play 2s steps(10);
-ms-animation: play 2s steps(10);
-o-animation: play 2s steps(10);
animation: play 2s steps(10);
}
#-webkit-keyframes play {
from { right: 100%; }
to { right: 0px; }
}
#-moz-keyframes play {
from { right: 100%; }
to { right: 0px; }
}
#-ms-keyframes play {
from { right: 100%; }
to { right: 0px; }
}
#-o-keyframes play {
from { right: 100%; }
to { right: 0px; }
}
<div class="square"></div>