I have created a fiddle of a simple donut chart: http://jsfiddle.net/4azpfk3r/217/
How can i get the donut chart to have a red outline and the score/percentage filled to be solid red leaving a transparent/red outlined section of percentage not scored?
CSS:
.background {
background: grey;
}
.item {
position: relative;
float: left;
}
.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440;
stroke-dashoffset: 440;
}
.html .circle_animation {
-webkit-animation: html 1s ease-out forwards;
animation: html 1s ease-out forwards;
}
.css .circle_animation {
-webkit-animation: css 1s ease-out forwards;
animation: css 1s ease-out forwards;
}
#-webkit-keyframes html {
to {
stroke-dashoffset: 80;
}
}
#keyframes html {
to {
stroke-dashoffset: 80;
}
}
If I am understanding your problem correctly, try adding this line of css:
#circle{fill:none;stroke:red;color:red}
For the score type to also be in red, add a color property to the h2:
.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
color:red; /*ADD RED COLOR TO SCORE*/
}
To style the Score header, first give it a class:
<p class="scoreHeader">Score: 76/100</p>
And style it as you wish:
.scoreHeader{
padding:10px;
background:red;
color:white;
font-weight:bold;
}
Check my example here https://codepen.io/350d/pen/gxXyGB
The idea is to utilize just a border-color and rotation. No gradients and animations used here.
Related
The code below is a part of my code :
.myBox:hover::after {
animation-name: underline;
animation-duration: 350ms;
animation-fill-mode: forwards;
}
#keyframes underline {
from { width: 0; }
to { width: 100%; }
}
It works nicley, but I want to do it vice versa when animation completed, I mean when it finished then width should be 0 again, In fact for this part I want to do it when my element is not hovered. Which property can help me ?
You need to use alternate and run 2 iterations of the animation:
.box {
height:200px;
background:red;
animation: underline 500ms alternate 2 forwards;
}
#keyframes underline {
from { width: 0; }
to { width: 100%; }
}
<div class="box">
</div>
Or consider the use of transition if you want the effect on hover:
.box {
height: 200px;
background: red;
width: 0;
transition: 500ms;
}
body:hover .box {
width: 100%;
}
<div class="box">
</div>
You can specify multiple values for animations rather then from and to using percentage:
#keyframes underline {
0%, 100% { width: 0; }
50% { width: 100%; }
}
More detailed information can be found here.
.myBox:hover::after {
animation-name: underline infinite;
animation-duration: 350ms;
animation-fill-mode: forwards;
}
#keyframes underline {
from { width: 0; }
to { width: 100%; }
}
You infinite for this
I have the following code that does almost everything I need it to do.
.mouse {
margin-bottom:20px;
padding:5px;
overflow:hidden;
width:200px;
}
.mouse:after {
content:"";
height:2px;
display:block;
background:red;
margin-top:5px;
transform:translateX(100%);
animation: hoverOut 1.5s ease 1;
}
.mouse:hover:after {
animation: hoverIn 1.5s ease 1;
}
#keyframes hoverOut {
0% {transform:translateX(0%);}
100% {transform:translateX(100%);}
}
#keyframes hoverIn {
0% {transform:translateX(-100%);}
100% {transform:translateX(0%);}
}
<div class="mouse">watch the line below</div>
Basically when you mouse over the text, you see a line slide in from the left. When you mouse out, you see the line slide out to the right.
My problem is if you go to your browser and press the refresh button to cause a page load, you'll see a line travel off to the right. I do not want this animation effect on page load. Is there something I can do with just HTML and CSS ? I do not want to introduce Javascript unless I absolutely have to.
Instead of using an animation use a transition with the property transform and a value of scaleX.
The "trick" here is to change transform-origin on the hover state.
Basically you do this:
.mouse:after {
content: "";
transform: scaleX(0);
transition: transform 1.5s ease;
transform-origin: right;
}
.mouse:hover:after {
transform: scaleX(1);
transform-origin: left;
}
Code Snippet:
.mouse {
margin-bottom: 20px;
padding: 5px;
overflow: hidden;
width: 200px;
}
.mouse:after {
content: "";
height: 2px;
display: block;
background: red;
margin-top: 5px;
transform: scaleX(0);
transition: transform 1.5s ease;
transform-origin: right;
}
.mouse:hover:after {
transform: scaleX(1);
transform-origin: left;
}
<div class="mouse">watch the line below</div>
If you however want to use your animation as it is, you would need to use javascript.
You need to add a class once the user hovers your element, in this case .running.
The basics are this:
.mouse:after {
content: "";
transform: translateX(100%);
animation: hoverOut 1.5s ease 1;
animation-play-state: paused; /* Initial state of the animation, paused. */
animation-delay: -1.5s; /* Get the first frame of the animation, this value has to be the total duration of the animation with a negative value */
}
.mouse.running:after {
animation-play-state: running; /* When the class is added, the animation state is changed to running */
animation-delay: 0s /* Set back to normal flow. */;
}
Code Snippet:
document.querySelector(".mouse").addEventListener("mouseenter", function() {
this.classList.add("running");
});
.mouse {
margin-bottom: 20px;
padding: 5px;
overflow: hidden;
width: 200px;
}
.mouse:after {
content: "";
height: 2px;
display: block;
background: red;
margin-top: 5px;
transform: translateX(100%);
animation: hoverOut 1.5s ease 1;
animation-play-state: paused;
animation-delay: -1.5s;
}
.mouse.running:after {
animation-play-state: running;
animation-delay: 0s;
}
.mouse:hover:after {
animation: hoverIn 1.5s ease 1;
}
#keyframes hoverOut {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
#keyframes hoverIn {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}
<div class="mouse">watch the line below</div>
Animations always run when the element becomes visible.(or the page loads)
For something like this you want to use a transition. much more streamlined.
Here is your code using transition.
.mouse {
margin-bottom:20px;
padding:5px;
overflow:hidden;
width:200px;
}
.mouse:after {
content:"";
height:2px;
display:block;
background:red;
margin-top:5px;
transition: transform 1s;
transform:translateX(100%);
}
.mouse:hover:after {
transform:translateX(-100%);
}
</style>
</head>
<body>
<div class="mouse">watch the line below</div>
</body>
</html>
Firefox has a nice behavior when turning off animation in a transition enabled element, it takes the element wherever it is and transition back to original form.
In Chrome it just jumps without transitioning.
Why the inconsistency? Is there any way to replicate in Chrome without using too much JS?
.wrapper {
width: 400px;
height: 200px;
}
.move {
width: 100px;
height: 100px;
position: absolute;
background-color: #f66;
transition: 1s;
cursor: pointer;
}
.move {
animation: move 2s linear infinite;
}
.wrapper:hover .move {
animation: none;
}
#keyframes move {
50% {
transform: translateX(200px);
}
}
<div class="wrapper">
<div class="move"></div>
</div>
$(".spinny").bind("webkitAnimationEnd mozAnimationEnd animationEnd", function(){
$(this).removeClass("spin")
})
$(".spinny").hover(function(){
$(this).addClass("spin");
})
div {
width: 100px;
height: 100px;
background-color: #f66;
transition: 1s;
cursor: pointer;
}
.spin {
animation: spin 1s linear 1;
}
#keyframes spin {
100% {
transform: rotate(180deg);
}
}
<script src="https://code.jquery.com/jquery-3.1.0.js"></script><div class="spinny"></div>
Taken from this answer, JS can be used to add and remove classes on hover and animation finish, respectively. jQuery is used in this example, but it is not necessary for the functionality.
EDIT: Now without jQuery, this will play the animation whenever hovered over by remembering the state and checking after the end of every animation.
hover = 0;
s = document.getElementById("spinny");
s.addEventListener("animationend", function(){
s.className = "";
if (hover)
setTimeout(function(){s.className = "spin"},0);
})
s.onmouseover = function(){
s.className = "spin";
hover = 1;
}
s.onmouseout = function(){
hover = 0;
}
div {
width: 100px;
height: 100px;
background-color: #f66;
transition: 1s;
cursor: pointer;
}
.spin {
animation: spin 1s linear 1;
}
#keyframes spin {
100% {
transform: rotate(180deg);
}
}
<div id="spinny"></div>
Add transition along side your transform
.rotate {
width: 200px;
height: 200px;
transform: rotate(0deg);
transition: 0.5s ease all;
background-color: #222;
}
.rotate:hover {
transform: rotate(20deg);
transition: 0.5s ease all;
}
This should prevent it from jumping.
I would like to define a CSS3 animation which, at some points during the animation, uses the natural value for a property as if the animation was not applied.
e.g.
#keyframes fadeblue
{
0%
{
background-color: natural;
}
100%
{
background-color: blue;
}
}
.thing1
{
background-color: red;
animation: fadeblue 2s;
}
.thing2
{
background-color: green;
animation: fadeblue 2s;
}
thing1 would fade from red to blue while thing2 would fade from green to blue.
What value should I use in the place of natural in the 0% keyframe?
I have tried both inherit and transparent but neither had the desired effect.
N.B. I know this can be done with a JavaScript solution but if possible I'd prefer a pure css3 solution.
So it seems you can't reference the original colour in keyframes. However, you can just specify one keyframe in a keyframes declaration and let the browser interpolate the colors for you. Using a keyframe of just 50% will use the original properties at 0% (aka from) and 100% (aka to).
With this knowledge we can also effectively queue animations using animation-delay to create what looks like a single animation, but isn't.
For example:
#keyframes fadeblue {
50% {
background-color: blue;
}
}
#keyframes fadewhite {
50% {
background-color: white;
}
}
.thing1 {
background-color: red;
animation: fadeblue 2s,
fadewhite 2s 2s;
/* shorthand here is: animation-name animation-duration animation-delay */
}
.thing2 {
background-color: green;
animation: fadeblue 2s,
fadewhite 2s 2s;
}
.thing3 {
background-color: yellow;
animation: fadeblue 2s,
fadewhite 2s 2s;
}
.thing4 {
background-color: purple;
animation: fadeblue 2s,
fadewhite 2s 2s;
}
<div class="thing1">Thing 1</div>
<div class="thing2">Thing 2</div>
<div class="thing3">Thing 2</div>
<div class="thing4">Thing 2</div>
You'll see the elements fade to blue and back to the original colour, then fade to white then the original colour.
jsfiddle for good measure.
You can achieve this if you use a pseudo-element (e.g. :before) for .thing1 and . thing2, set it's color to blue, and animate it's opacity. It's a bit more work, but I believe it will be more flexible solution:
(see working demo below)
#keyframes fadeblue {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.thing1,
.thing2 {
width: 100px;
height: 100px;
display: inline-block;
position: relative;
}
.thing1:before,
.thing2:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: blue;
animation: fadeblue 2s infinite;
}
.thing1 {
background-color: red;
}
.thing2 {
background-color: green;
}
<div class="thing1"></div>
<div class="thing2"></div>
I am working on an exercise about CSS 3 animation. I am stuck on how to keep the item falling down the page at full speed without requiring the user to follow it down with the mouse without resorting to javascript. So just when you hover the mouse over the box the box will fall down.
Here is my code:
<p class="exp9"><strong>box</strong></p>
strong {
margin-top: 20em;
}
p:hover strong {
display: block;
}
p:hover strong:hover {
margin-top: 20em;
}
My code just make the text inside the box drop down. Any idea? Thank you
Use this
/*newly added items start faded out and translated 400px upwards on the y-axis*/
li.new-item {
opacity: 0;
animation: new-item-animation .3s linear forwards;
}
#keyframes new-item-animation {
from {
opacity: 0;
transform: translateY(-400px);
}
to {
opacity: 1;
transform : translateY(0);
}
}
Here is an example of what you can do:
<div class="box">
<p class="innerbox">
Hover
</p>
</div>
CSS:
.innerbox
{
Width:150px;
height:20px;
background-color: lightBlue;
Text-align: center;
Padding:10px 0px;
}
.box
{
Display:inline-block;
Transition: 0.3s 0s All linear;
}
.box:hover
{
Padding-top:20em;
}
In the context of your HTML:
strong
{
Text-align: center; /* this makes it more aesthetic */
Padding:10px 20px; /* this makes the text more easy to hover over */
}
p
{
Display: inline-block; /* this is so the box doesn't stretch the width of the page */
Transition: 0.3s 0s all linear;
}
p:hover
{
padding-top: 20em;
}
Not sure if this is the result you want.
p{
width: max-content; /*add this if you don't want the paragraph to take the whole width*/
}
p strong{
display: block;
}
p:hover strong{
animation: fall .1s linear forwards;
}
#keyframes fall{
0%{
transform: translateY(0);
}
100%{
transform: translateY(20em);
}
}
<p class="exp9"><strong>box</strong></p>