I have this CSS3 code:
#box2 {
position: relative;
width: 500px;
border: 1px solid black;
box-shadow: -3px 8px 34px #808080;
border-radius: 20px;
box-shadow: -8px 5px 5px #888888;
right: 300px;
top: 113px;
text-align: justify;
-webkit-transition: all 1s;
font-size: large;
color: Black;
padding: 10px;
background: #D0D0D0;
opacity: 0;
}
#-webkit-keyframes mySecond {
0% {
right: 300px;
top: 13px;
background: #D0D0D0;
opacity: 0;
}
100% {
background: #909090;
right: 300px;
top: 63px;
opacity: 1;
}
}
#littlebox2 {
top: 053px;
position: absolute;
display: inline-block;
}
.littlebox2sentence {
font-size: large;
padding-bottom: 15px;
padding-top: 15px;
padding-left: 25px;
padding-right: 10px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#9CCEDA), to(#58A8D8));
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-transition: background .25s ease-in-out;
border-bottom: 2px solid red;
border-right: 2px solid red;
border-top: 2px solid red;
-webkit-transition-property: color, background;
-webkit-transition-duration: .25s, .25s;
-webkit-transition-timing-function: linear, ease-in-out;
color: #164ad7;
}
#bothcontainer2:hover ~ #box2 {
-webkit-transition: all 0s;
background: #909090;
right: 300px;
top: 63px;
-webkit-animation: mySecond .75s;
-webkit-animation-fill-mode: initial;
opacity: 1;
}
#bothcontainer2:hover .littlebox2sentence {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#B2DFE9), to(#83BEF1));
color: black;
}
Live example here: http://jsfiddle.net/md966/3/
How can I do an animation with gradient color? If the colors were for example blue and red it works fine (the background color transition) but when I replace it with gradient color it doesn't work. I found some tutorials but they don't really helped me.
When using a gradient as background, you don't define a background-color. A gradient is a background-image.
Background-image isn't a property that can get animated. So your approach can not work.
Related
I want to do something like the code below does but instead of having it "teleport" to the center I wish I could pause just one animation and keep the others running, in other words the element should stop wherever it is because the pass animation is paused, but the anim and force-stop animations should start running.
body {
background: #121212;
overflow: hidden;
}
.input {
transition: 100ms ease;
position: relative;
width: 100px;
height: 100px;
background: transparent;
border: 1.2px solid #383838;
border-radius: 10px;
margin: 0 auto;
top: 200px;
text-align: center;
}
.input .blaster {
position: absolute;
transition: 100ms ease;
background: #fff;
width: 100px;
height: 10px;
margin: 30% auto;
filter: blur(3px);
border-radius: 50%;
animation: anim 2s ease infinite,pass 500ms linear infinite;
top: -150px;
}
.input > span {
transition: 100ms ease;
position: relative;
top: 40px;
color: #aaa;
}
.input:hover {
animation: move 100ms ease infinite;
border-color: #eee;
background-color: #272727;
}
.input:hover > .blaster {
animation: anim 2s ease infinite,move 100ms ease infinite;
}
.input:hover > span {
color: transparent;
}
#keyframes anim {
from {
box-shadow: 0 0 5px 2px #fff,0px 0px 10px 3px #f33,0 0 15px 3px #f33;
}
50% {
box-shadow: 0 0 5px 2px #fff,0px 0px 16px 3px #f33,0 0 15px 5px #f33;
}
to {
box-shadow: 0 0 5px 2px #fff,0px 0px 10px 3px #f33,0 0 15px 3px #f33;
}
}
#keyframes pass {
from {
transform: translateX(-600px);
}
to {
transform: translateX(600px);
}
}
#keyframes move {
from {
transform: translateX(0px);
}
25% {
transform: translateX(2.24px);
}
75% {
transform: translateX(-1.75px);
}
to {
transform: translateX(0px);
}
}
<div class="input">
<span>Hover me</span>
<div class="blaster"></div>
</div>
I tried using animation-play-state but it pauses all animations.
Also I would prefer to do this in pure SCSS/CSS3 if possible but if there is a simple way to do it in JavaScript or jQuery it's acceptable too.
Thanks in advance!
UPDATE: I've made some janky styles in that snippet so unfortunately it only works in full-page.
Consider animation-play-state by simply writing:
.input:hover > .blaster {
animation-play-state:running,paused;
}
Full code
body {
background: #121212;
overflow: hidden;
}
.input {
transition: 100ms ease;
position: relative;
width: 100px;
height: 100px;
background: transparent;
border: 1.2px solid #383838;
border-radius: 10px;
margin: 0 auto;
top: 200px;
text-align: center;
}
.input .blaster {
position: absolute;
transition: 100ms ease;
background: #fff;
width: 100px;
height: 10px;
margin: 30% auto;
filter: blur(3px);
border-radius: 50%;
animation: anim 2s ease infinite,pass 500ms linear infinite;
top: -150px;
}
.input > span {
transition: 100ms ease;
position: relative;
top: 40px;
color: #aaa;
}
.input:hover {
animation: move 100ms ease infinite;
border-color: #eee;
background-color: #272727;
}
.input:hover > .blaster {
animation-play-state:running,paused;
}
.input:hover > span {
color: transparent;
}
#keyframes anim {
from {
box-shadow: 0 0 5px 2px #fff,0px 0px 10px 3px #f33,0 0 15px 3px #f33;
}
50% {
box-shadow: 0 0 5px 2px #fff,0px 0px 16px 3px #f33,0 0 15px 5px #f33;
}
to {
box-shadow: 0 0 5px 2px #fff,0px 0px 10px 3px #f33,0 0 15px 3px #f33;
}
}
#keyframes pass {
from {
transform: translateX(-600px);
}
to {
transform: translateX(600px);
}
}
#keyframes move {
from {
transform: translateX(0px);
}
25% {
transform: translateX(2.24px);
}
75% {
transform: translateX(-1.75px);
}
to {
transform: translateX(0px);
}
}
<div class="input">
<span>Hover me</span>
<div class="blaster"></div>
</div>
I have tried to make an animation using CSS keyframes, but the design is breaking. How can I make it responsive without writing media queries, as it's just a simple animation code?
div {
font-family: "Comic Sans MS", sans-serif;
margin-left: 200px;
margin-top: 200px;
}
span {
color: white;
font-size: 35px;
padding: 14px 25px;
margin: 5px;
border-radius: 10px;
display: inline-block;
animation: move 0.8s infinite linear;
}
#keyframes move {
0% {
transform: translateY(0px);
opacity: 1.0;
}
50% {
transform: translateY(-50px);
opacity: 0.5;
}
100% {
transform: translateY(0px);
opacity: 1.0;
}
}
span:nth-child(1) {
animation-delay: 0.1s;
background-color: red;
box-shadow: 5px 5px 0 black;
}
span:nth-child(2) {
animation-delay: 0.2s;
background-color: blue;
box-shadow: 5px 5px 0 black;
}
span:nth-child(3) {
animation-delay: 0.3s;
background-color: green;
box-shadow: 5px 5px 0 black;
}
span:nth-child(4) {
animation-delay: 0.4s;
background-color: orangered;
box-shadow: 5px 5px 0 black;
}
span:nth-child(5) {
animation-delay: 0.5s;
background-color: springgreen;
box-shadow: 5px 5px 0 black;
}
span:nth-child(6) {
animation-delay: 0.6s;
background-color: blueviolet;
box-shadow: 5px 5px 0 black;
}
span:nth-child(7) {
animation-delay: 0.7s;
background-color: purple;
box-shadow: 5px 5px 0 black;
}
<div>
<span>W</span>
<span>E</span>
<span>L</span>
<span>C</span>
<span>O</span>
<span>M</span>
<span>E</span>
</div>
Without using a media query, you are limited to what you can do, but in this example, I've removed your set margin-left value and used a percentage instead and made the containing div a percentage width. I've also made the parent div a flex container - this will make sure things have a harder time wrapping on smaller screens.
I then used vw units for the font-size, so it will scale with the window width. Also the padding on the boxes needs to be set to percentages. You can play with it here:
https://jsfiddle.net/disinfor/s5hkyr2f/3/
div {
font-family: "Comic Sans MS", sans-serif;
margin: 200px auto 0;
width: 90%;
display: flex;
justify-content: center;
}
span {
color: white;
font-size: 4vw;
padding: 2% 3%;
margin: 5px;
border-radius: 10px;
display: inline-block;
animation: move 0.8s infinite linear;
}
#keyframes move {
0% {
transform: translateY(0px);
opacity: 1.0;
}
50% {
transform: translateY(-50px);
opacity: 0.5;
}
100% {
transform: translateY(0px);
opacity: 1.0;
}
}
span:nth-child(1) {
animation-delay: 0.1s;
background-color: red;
box-shadow: 5px 5px 0 black;
}
span:nth-child(2) {
animation-delay: 0.2s;
background-color: blue;
box-shadow: 5px 5px 0 black;
}
span:nth-child(3) {
animation-delay: 0.3s;
background-color: green;
box-shadow: 5px 5px 0 black;
}
span:nth-child(4) {
animation-delay: 0.4s;
background-color: orangered;
box-shadow: 5px 5px 0 black;
}
span:nth-child(5) {
animation-delay: 0.5s;
background-color: springgreen;
box-shadow: 5px 5px 0 black;
}
span:nth-child(6) {
animation-delay: 0.6s;
background-color: blueviolet;
box-shadow: 5px 5px 0 black;
}
span:nth-child(7) {
animation-delay: 0.7s;
background-color: purple;
box-shadow: 5px 5px 0 black;
}
<div>
<span>W</span>
<span>E</span>
<span>L</span>
<span>C</span>
<span>O</span>
<span>M</span>
<span>E</span>
</div>
I'm currently trying to change both my background and my text color at the same time, from left to right. Like the background is doing it.
But, since transform origin does not work in text, I would like to know how (if possible) can I achieve this?
Here is a demo of what I could do:
.container {
background-color: gray;
height: 200px;
width: 50vw;
margin: 5vw;
opacity: 0.5;
border-left: 5px solid black;
position: relative;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
-webkit-transform-origin: left;
transform-origin: left;
}
.container:hover {
color: white;
}
.container:hover::after {
width: 100%;
content: '';
}
.container::after {
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
opacity: 0.5;
background-color: darkgreen;
}
.container .text {
display: block;
text-align: center;
font-size: 2.3em;
font-family: 'Roboto';
line-height: 2.5em;
}
<div class="container">
<div class="text">Change Text at the same time</div>
</div>
I achieved the effect by adding the following properties to .text:
background: linear-gradient(to left, black 0%, black 50%, white 50%, white 100%); // half black and half white background
background-clip: text; // clip the background in the shape of the text
color: transparent; // remove the color of the text
background-size: 200%; // double the size of the background
background-position: 100% 0; // move the background to show just the black color
Now to make the color change effect - move the background position to 0% to show the white color:
.container:hover .text {
background-position: 0;
}
Demo
.container {
background-color: gray;
height: 200px;
width: 50vw;
margin: 5vw;
opacity: 0.5;
border-left: 5px solid black;
position: relative;
-webkit-transition: 0.5s all ease;
transition: 0.5s all ease;
transform-origin: left;
}
.container:hover .text {
background-position: 0;
}
.container:hover::after {
width: 100%;
content: '';
}
.container::after {
transition: all 1s ease;
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0%;
opacity: 0.5;
background-color: darkgreen;
}
.container .text {
transition: all 1s ease;
display: block;
text-align: center;
font-size: 2.3em;
font-family: 'Roboto';
line-height: 2.5em;
background: linear-gradient(to left, black 0%, black 50%, white 50%, white 100%);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
color: transparent;
background-size: 200%;
background-position: 100% 0;
}
<div class="container">
<div class="text">Change Text at the same time</div>
</div>
Browsers support:
Supported by Firefox, Chrome, and other webkit browsers.
Not supported by IE and Edge, as they don't support background-clip: text;
I personally can't recreate the problem, but a user is seeing blurring on the text within tooltips. She's running an up-to-date version of Chrome on a modern Windows machine. She says it's pretty hard to even make out what the text says.
/* The question mark that the user clicks on */
.tooltip_wrapper {
font-size: 14px;
display: inline-block;
margin-left: 10px;
padding: 0 10px;
background: #ececec;
color: #555;
cursor: help;
font-family: "Gill Sans", Impact, sans-serif;
position: relative;
text-align: center;
-webkit-transform: translateZ(0); /* WebKit flicker fix */
-webkit-font-smoothing: antialiased; /* WebKit text rendering fix */
z-index: 900;
}
.tooltip_wrapper .tooltip {
background: #1496bb;
bottom: 100%;
color: #fff;
display: block;
left: -25px;
margin-bottom: 15px;
opacity: 0; /* This hides the box when not hovering */
padding: 20px;
pointer-events: none;
position: absolute;
width: 400px;
-webkit-transform: translate(10px);
-moz-transform: translate(10px);
-ms-transform: translate(10px);
-o-transform: translate(10px);
transform: translate(10px);
/* These used to be all translateY */
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
/* -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); */
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.tooltip_wrapper .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
/* CSS Triangles - see Trevor's post */
.tooltip_wrapper .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #1496bb 10px;
bottom: -10px;
content: " ";
height: 0;
right: 88%;
margin-left: -13px;
position: absolute;
width: 0;
}
.tooltip_wrapper:hover .tooltip {
opacity: 1;
pointer-events: auto;
-webkit-transform: translate(0px);
-moz-transform: translate(0px);
-ms-transform: translate(0px);
-o-transform: translate(0px);
transform: translate(0px);
/* These used to be all translateY */
}
/* Internet Explorer can just show/hide with no transition */
.lte8 .tooltip_wrapper .tooltip {
display: none;
}
.lte8 .tooltip_wrapper:hover .tooltip {
display: block;
}
<h1>
Some header to create space
</h1>
<div class='tooltip_wrapper'>?<div class='tooltip'>This is the tooltip text</div></div>
I've set up a JSFiddle on that site too, https://jsfiddle.net/rsnbtph7/#&togetherjs=xDN35iPAvV.
Where should I tweak the code so these users aren't disadvantaged?!
CalvT got it in one - I changed the font to Arial and the problem is now gone.
Yes Changing font-family is really works, just paste this line in your css and you will be done.
.tooltip {
font-family: Arial,sans-serif !important;
}
I have a tooltip box and it is working fine. Now I want to add some fade in fade out once the tool-tip box pops in and out.
<a class="tooltip" title="This is some information for our tooltip." href="#"><img id="graph_one" alt="" src="https://www.onlandscape.co.uk/wp-content/uploads/2013/09/Doug-Chinnery-ICM-Images-4-45x45.jpg" class="graph one"> </a>
Demo : http://jsfiddle.net/squidraj/FHUbA/
How about this?
http://jsfiddle.net/FHUbA/14/
.tooltip:after{
opacity: 0;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:after {
opacity:1;
}
What about this one:
http://jsfiddle.net/Roobyx/FHUbA/45/
(you can fix the styles afterwards)
HTML:
<a class="has-tooltip" href="#">
<span class="tooltip">This is some information for our tooltip.</span>
<img id="graph_one" class="graph one" src="https://www.onlandscape.co.uk/wp-content/uploads/2013/09/Doug-Chinnery-ICM-Images-4-45x45.jpg" />
</a>
CSS:
a[title].tooltip {
width:45px;
height:90px;
}
.tooltip {
display: inline-block;
position: relative;
}
.has-tooltip {
color: #555;
font-size: 16px;
display: block;
margin: 150px 75px 10px 75px;
padding: 5px 5px;
position: relative;
text-align: center;
width: 200px;
-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}
.has-tooltip .tooltip {
background: #000;
bottom: 100%;
color: #fff;
display: block;
left: -10px;
margin-bottom: 15px;
border-radius: 5px;
opacity: 0;
padding: 20px;
position: absolute;
visibility: hidden;
width: 100%;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
.has-tooltip .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
.has-tooltip .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #000 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
.has-tooltip:hover .tooltip {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}