I made these buttons and I want to add an animation click effect to them such that, when the left button is clicked it goes down (slightly to the right) and comes back up.
And when the right button is clicked it goes down (slightly to the left) and comes back up.
And the background of the button should become dark red in the first few seconds and light up again.
The right button (NEXT >) works fine but the left one doesn't. Please tell me how to make the same animation on the left button (< PREVIOUS). Also suggest any changes if needed.
body {font-family: Verdana, sans-serif;}
i.fa {
font-size: 24px;
font-weight: bold;
}
a#previous, a#next {
text-decoration: none;
background-color: #f00;
color: white;
font-size: 1.3em;
padding: 12px 16px;
border-radius: 7px;
}
a#next {
float: right;
margin-top: -8.1px;
padding: 12.5px 16px;
box-shadow: -3px 3px rgb(190, 0, 0);
}
a#next:active {
animation: next_click .6s ease-in-out;
}
#keyframes next_click {
0% {background: rgb(225, 0, 0); box-shadow: -2px 2px rgb(180, 0, 0); transform: translate(-1px, 1px);}
100% {background: rgb(255, 0, 0); box-shadow: -3px 3px rgb(190, 0, 0); transform: translate(0, 0);}
}
a#previous {box-shadow: 3px 3px rgb(190, 0, 0);}
a#previous:active {
background: rgb(225, 0, 0);
box-shadow: 2px 4px rgb(180, 0, 0);
transform: translate(-1px, 1px);
}
a#previous:hover, a#next:hover {background: rgb(225,0,0);}
<!DOCTYPE html>
<html><head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<br><br>
<a id="previous" href="javascript:void(0);"><i class="fa fa-angle-left"></i> Previous</a>
<a id="next" href="javascript:void(0);">Next <i class="fa fa-angle-right"></i></a>
</body>
</html>
This is how I did it:
a#previous:active {
background: rgb(225, 0, 0);
box-shadow: 2px 4px rgb(180, 0, 0);
transform: translate(-1px, 1px);
/* add this animation*/
animation: previous_click 0.6s ease-in-out;
}
/*this is the keyframe for left button*/
#keyframes previous_click {
0% {
background: rgb(225, 0, 0);
box-shadow: 4px 4px rgb(180, 0, 0);
transform: translate(1px, -1px);
}
100% {
background: rgb(255, 20, 20);
box-shadow: 3px 3px rgb(190, 0, 0);
transform: translate(0, 0);
}
}
Related
I have the following JS fiddle: https://jsfiddle.net/ur9bpgbn/163/
.arrow {
position: absolute;
font-size: 16px;
max-width: 350px;
background: #FFF;
height: 40px;
line-height: 40px;
margin-bottom: 20px;
text-align: center;
color: #000;
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s ease-in-out;
z-index: 999;
}
.arrow.active {
visibility: visible;
opacity: 1;
}
.arrow.active.animate-left-to-right {
animation-name: move-left-to-right;
animation-duration: 1s;
animation-delay: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternative;
}
.arrow.active.animate-right-to-left {
animation-name: move-right-to-left;
animation-duration: 1s;
animation-delay: 0.6s;
animation-iteration-count: infinite;
animation-direction: alternative;
}
#keyframes move-left-to-right {
0% {
transform: translateX (5%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(15%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(5%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
#keyframes move-right-to-left {
0% {
transform: translateX(-5%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(-15%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(-5%);
box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
/*right arrow*/
.arrow-right {
border-radius: 0px 0px 0 0px;
background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7));
}
.arrow-right:after {
content: "";
position: absolute;
right: -20px;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #FFF;
opacity: 0.7;
}
.arrow-right:before {
content: "";
position: absolute;
left: -20px;
top: 0;
border-top: 0px solid transparent;
border-bottom: 40px solid transparent;
border-right: 20px solid #FFF;
opacity: 1;
}
/*left arrow*/
.arrow-left {
border-radius: 0 0px 0px 0;
background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.7));
}
.arrow-left:before {
content: "";
position: absolute;
left: -20px;
top: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #FFF;
opacity: 0.7;
}
.arrow-left:after {
content: "";
position: absolute;
right: -20px;
top: 0;
border-top: 0px solid transparent;
border-bottom: 40px solid transparent;
border-left: 20px solid #FFF;
opacity: 1;
}
<div id="app">
<a href="https://sporedev.ro" target="_blank">
<div href="#" class="arrow arrow-right animate-right-to-left">This is a text</div>
</a>
<div href="#" class="arrow arrow-left animate-left-to-right" style="margin-top:30%; margin-left:30%;"><span class="room-desc">This is a text</span></div>
</div>
The arrow that moves to the right side works perfectly.
The arrow to the left side has some kind of a glitch, it has a sudden move when it reaches the end of the transition.
I tried applying changes to the CSS in everything related to the left arrow with no effect. The script has some JS that adds the "active" class and I tried removing it to simplify the script and make sure it's not a JS related problem with no effect.
Tried reading up transitions but I didn't found any solutions. I'm sure that I miss something that is CSS related.
How can I make the arrow that points to the left side move smoothly?
Update this part transform: translateX (5%); to transform: translateX (0%);
#keyframes move-left-to-right {
0% {
transform: translateX (0%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateX(15%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4);
}
100% {
transform: translateX(0%);
box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.2);
}
}
https://jsfiddle.net/ur9bpgbn/168/
I believe the little jump is the 0-5% which it is not animating so it just jumps
I am making a ticker animation on my site.
This is the HTML:
<div class="top-news">
<div class="t-n-c">
<div class="textwidget">Latest News: Our first 20 customers get 20% off their first order! Order now with the coupon 20FOR20 to use this offer!
</div>
</div>
</div>
And this is the CSS:
.top-news{
color: white;
-webkit-font-smoothing: subpixel-antialiased;
font-weight: bold;
text-shadow: 0 1px 0 #ac8b00;
background-color: #f0cf31;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0cf31), to(#bd9c00));
background-image: -webkit-linear-gradient(top, #f0cf31, #bd9c00);
background-image: -moz-linear-gradient(top, #f0cf31, #bd9c00);
background-image: -ms-linear-gradient(top, #f0cf31, #bd9c00);
background-image: -o-linear-gradient(top, #f0cf31, #bd9c00);
background-image: linear-gradient(to bottom, #f0cf31, #bd9c00);
border: 1px solid #9b7a00;
-webkit-border-radius: 0.202em;
border-radius: 0.202em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: 0 0 0 0.327em rgba(0, 0, 0, 0.075), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px #fff153, inset 0 -1px #ac8b00;
box-shadow: 0 0 0 0.327em rgba(0, 0, 0, 0.075), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px #fff153, inset 0 -1px #ac8b00;
padding: 10px;
overflow: hidden;
white-space: nowrap;
padding-left: 100%;
}
.top-news > .t-n-c{
padding-right: 100%;
}
.top-news > .t-n-c > .textwidget{
display: inline-block;
animation-name: ticker;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 35s;
}
.top-news:hover > .t-n-c > .textwidget{
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
#keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
However the result is that the text isn't going all the way to the left on my laptop. It is working fine on my iPhone, probably because the screen is smaller but if you check the live demo at: https://codepen.io/anon/pen/RRGvgG you will see that it isn't working properly on laptops.
It looks like it isn't finishing because the text finished. How can I make it so it keeps scrolling even after there is no more text?
It stops because it reaches 100% when all the text is shown. I changed
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
to
-webkit-transform: translate3d(-250%, 0, 0);
transform: translate3d(-250%, 0, 0);
and it works.
The way that translate3d works is that the percentage specified is based on the actual element's width, not the width of its container like you might expect. Therefore, if the screen is less than the width of the ticker (which is 800px, or so), it appears to be skipping back to the beginning.
You will need to increase the percentage high enough that it will always make a full rotation on all screens and slow it down. This will make the loop inaccurate, so that's something to consider. I increased the animation duration to account for the greater distance animated. See this updated codepen:
https://codepen.io/thecox/pen/pbEGVQ
.top-news > .t-n-c > .textwidget{
animation-duration: 45s;
}
#keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-300%, 0, 0);
transform: translate3d(-300%, 0, 0);
}
}
I was working on this website, which uses bootstrap. On it there are circle-shaped images and when the mouse hovers I want to create an effect of that picture as creating a color light. For that, I used box-shadow because shadows wouldn't interfere within the image. The code looks like this:
HTML:
<div class="col-sm-3" id="af">
<br/><br/><br/>
<center>
<img src="OnePicture.jpg" class="img-circle smallpic"/>
</center>
<!-- The div continues with text -->
</div>
CSS:
.smallpic{
max-width:100px;
max-height: 100px;
border: 3px solid transparent;
/*Trying to force GPU Acceleration*/
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: all 1s;
-webkit-transition-timing-function: ease;
transition: all 1s;
transition-timing-function: ease;
}
#af:hover .smallpic{
border: 3px solid #E3000E;
-webkit-transform: translate3d(0,0,0);
-moz-box-shadow: 0 0 500px 100px #E3000E;
-webkit-box-shadow: 0 0 500px 100px #E3000E;
box-shadow: 0 0 500px 100px #E3000E;
}
This code did exactly what I want, but due to a Webkit bug, it won't work properly on any Webkit based browser, which includes the popular Google Chrome.
Here is the result in Google Chrome: link
In my tests, the code worked really well in Mozilla Firefox, Microsoft Edge and also Internet Explorer. But Google Chrome, Vivaldi and other webkit based browsers tested got the same buggy look. Is there another way to make that effect work in all browsers besides box-shadow usage?
But it is still possible to have the same behaviour in all browsers. You need just to modify your HTML and CSS.
Here the example HTML
<div class="wrapper red">
<div class="image"></div>
<h2>Red</h2>
</div>
<div class="wrapper blue">
<div class="image"></div>
<h2>Blue</h2>
</div>
<div class="wrapper green">
<div class="image"></div>
<h2>Green</h2>
</div>
Here the example CSS:
.wrapper {
display: inline-block;
position: relative;
width: 300px;
height: 300px;
}
.wrapper:before {
position: absolute;
content: ' ';
z-index: -1;
top: 0;
left: 0;
bottom: 0;
right: 0;
transition: all 2s;
}
.blue:before {
background: radial-gradient(ellipse at center, rgba(0, 0, 255, .7) 10%, rgba(0, 0, 255, 0) 70%);
opacity: 0;
}
.red:before {
background: radial-gradient(ellipse at center, rgba(255, 0, 0, .7) 10%, rgba(255, 0, 0, 0) 70%);
opacity: 0;
}
.green:before {
background: radial-gradient(ellipse at center, rgba(0, 255, 0, .7) 10%, rgba(0, 255, 0, 0) 70%);
opacity: 0;
}
.wrapper:hover:before {
opacity: 1;
}
.image {
margin: 100px auto 0;
border: 4px solid red;
border-radius: 50%;
width: 100px;
height: 100px;
}
.green .image {
border-color: rgb(0, 255, 0);
background-color: rgba(0, 255, 0, .3);
}
.red .image {
border-color: rgb(255, 0, 0);
background-color: rgba(255, 0, 0, .3);
}
.blue .image {
border-color: rgb(0, 0, 255);
background-color: rgba(0, 0, 255, .3);
}
h2 {
text-align: center;
}
Here a live demo
I'm new to CSS3 and for the sake of learning it, I'm using CSS3d transform: rotateY property to rotate a button 180 with an ease transition. But due to 180 flip the words are shown in reversed. What can be done so that words in the button are shown in exactly the same manner before being rotate.
From what I've read so far is that I need to customize the back portion of the button but I don't know how to do that.
Here is my Codepen code: http://codepen.io/vikrantnegi007/pen/QbozLq
HTML:
<div class="container">
<div class="jumbotron">
<h1>Let's have fun!</h1>
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
<button id="btn4">btn4</button>
</div><!-- /.jumbotron -->
</div>
CSS Code:
#import url(https://fonts.googleapis.com/css?family=Cinzel);
.container {
margin: 0 auto;
width: 500px;
background-color: rgba(35, 35, 35, 0.4);
text-align: center;
border-radius: 5px;
border: 2px solid #000;
}
.jumbotron {
font-family: "Cinzel";
padding-bottom: 20px;
}
h1 {
color: rgba(50, 50, 50);
}
button {
height: 50px;
width: 100px;
cursor: pointer;
text-transform: uppercase;
background-color: rgba(65, 69, 67, 0.5);
color: #fff;
border: 1.5px solid #fff;
border-radius: 5px 30px 5px 30px;
box-shadow: 0px 2px 5px rgba(110, 110, 110, 0.4);
margin-left: 5px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
button:hover {
background-color: rgba(180, 180, 180, 0.4);
-webkit-transform: rotateY(180deg) scale(1.5);
transform: rotateY(180deg) scale(1.5);
}
button:active {
-webkit-transform: translate(1px, 1px) scale(0.9,0.9);
transform: translate(1px, 1px) scale(0.9, 0.9);
}
Generally when you rotate an element, the backside comes to the front and vice-versa. Since your background color is semi transparent, the reverse side is getting shown through.
One way to avoid the text being displayed in reverse is to put the text inside its own element (say a <span> tag) and then apply the reverse transform when the button is hovered on (like in the below snippet):
#import url(https://fonts.googleapis.com/css?family=Cinzel);
.container {
margin: 0 auto;
width: 500px;
background-color: rgba(35, 35, 35, 0.4);
text-align: center;
border-radius: 5px;
border: 2px solid #000;
}
.jumbotron {
font-family: "Cinzel";
padding-bottom: 20px;
}
h1 {
color: rgba(50, 50, 50);
}
button {
height: 50px;
width: 100px;
cursor: pointer;
text-transform: uppercase;
background-color: rgba(65, 69, 67, 0.5);
color: #fff;
border: 1.5px solid #fff;
border-radius: 5px 30px 5px 30px;
box-shadow: 0px 2px 5px rgba(110, 110, 110, 0.4);
margin-left: 5px;
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
button:hover {
background-color: rgba(180, 180, 180, 0.4);
transform: rotateY(180deg) scale(1.5);
}
button:active {
transform: translate(1px, 1px);
transform: scale(0.9, 0.9);
}
button > span {
display: block;
transition: all 1s ease;
}
button:hover > span {
transform: rotateY(-180deg);
}
<div class="container">
<div class="jumbotron">
<h1>Let's have fun!</h1>
<button id="btn1"><span>btn1</span></button>
<button id="btn2"><span>btn1</span></button>
<button id="btn3"><span>btn1</span></button>
<button id="btn4"><span>btn1</span></button>
</div>
<!-- /.jumbotron -->
</div>
An alternate method would be to create a backside for the element and then make it get displayed when the button is being hovered on (like you had mentioned in question). You can find a sample for that in my answer here.
How can someone achieve the effect shown here using pure css3.
Using this (pure CSS/without javascript):
Animated progress circle in CSS
Using the :target selector
I create an example, Probably still not what you are looking for, but it was the closest I came.
Example (Demo in jsfiddle):
<style>
#-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);
}
}
#-o-keyframes rotate {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#startupload:target {
/*"disable" button*/
background: transparent;
border: none;
}
#startupload:target div.before {
/*Hide If has hash in url address browser*/
display: none;
}
#startupload div.progress-circle-container {
position: relative;
height: 230px;
width: 230px;
margin: 0 auto;
display: none; /*hide If no Hash in address*/
}
#startupload:target div.progress-circle-container {
display: block; /*Show If Hash in address*/
}
#startupload div.progress-circle-container div.progress-circle-outer {
background-color: #faef85;
background-repeat: repeat-x;
background-image: -moz-linear-gradient(0deg, #d66f0f, #faef85);
background-image: -webkit-linear-gradient(0deg, #d66f0f, #faef85);
background-image: -o-linear-gradient(0deg, #d66f0f, #faef85);
background-image: linear-gradient(0deg, #d66f0f, #faef85);
width: 230px;
height: 230px;
position: absolute;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
-webkit-animation: rotate 2.2s infinite linear;
-moz-animation: rotate 2.2s infinite linear;
-o-animation: rotate 2.2s infinite linear;
animation: rotate 2.2s infinite linear;
-webkit-box-shadow: inset 0 2px 10px #d58513,inset 0 0 20px #b93d00,0 0 15px rgba(216, 140, 23, 0.25);
-moz-box-shadow: inset 0 2px 10px #d58513,inset 0 0 20px #b93d00,0 0 15px rgba(216, 140, 23, 0.25);
box-shadow: inset 0 2px 10px #d58513,inset 0 0 20px #b93d00,0 0 15px rgba(216, 140, 23, 0.25);
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
}
#startupload:target div.progress-circle-container div.progress-circle-outer.animate {
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
animation-play-state: running;
}
#startupload div.progress-circle-container div.progress-circle-inner {
height: 170px;
width: 170px;
margin: 0 auto;
position: absolute;
left: 30px;
top: 30px;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
background-color: #fff;/*change color background*/
-webkit-box-shadow: inset 0 2px 1px #ffffff,inset 0 -1px 1px rgba(0, 0, 0, 0.08),inset 0 -3px 1px rgba(0, 0, 0, 0.09),0 2px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 2px 1px #ffffff,inset 0 -1px 1px rgba(0, 0, 0, 0.08),inset 0 -3px 1px rgba(0, 0, 0, 0.09),0 2px 2px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 2px 1px #ffffff,inset 0 -1px 1px rgba(0, 0, 0, 0.08),inset 0 -3px 1px rgba(0, 0, 0, 0.09),0 2px 2px rgba(0, 0, 0, 0.3);
text-align: center;
}
</style>
<form action="#startupload">
<button id="startupload" type="submit">
<div class="before">
Start upload
</div>
<div class="progress-circle-container">
<div class="progress-circle-outer animate">
</div>
<div class="progress-circle-inner"></div>
</div>
</button>
</form>
Perhaps the ultimate goal to achieve the best is something like:
css3 animations frame by frame