My image animation works fine, but text animation doesn't work at all. Where I am going wrong with this code?
#-webkit-keyframes hue {
from {
-webkit-filter: hue-rotate(0deg);
}
to {
-webkit-filter: hue-rotate(-360deg);
}
}
#keyframes round {
100% {
border-radius: 0px;
width: 256px;
height: 256px;
opacity: 100%;
}
0% {
border-radius: 25px;
width: 0px;
height: 0px;
opacity: 0%;
}
}
img {
animation: round 3s ease-in-out;
}
#anim {
-webkit-animation: hue 60s infinite linear;
}
<h1>As you see this animation works fine:</h1>
<img src="https://i.stack.imgur.com/LwSTv.png?s=328&g=1">
<hr>
<h1 class="anim">But this text must be animated with hue animation!</h1>
JsFiddle
First - as RussAwesome mentioned - you are using an ID selector instead of class selector.
Second - try setting the text color to a different value than black.
For example: Red
.anim {
color:red;
-webkit-animation: hue 2s infinite linear;
}
Here's your updated fiddle
I've reduced the animation time to better show the effect.
You have set the HTML to have class="anim" but you have declared the CSS with an id instead: #anim {...} Change this to .anim or change your HTML to be id="anim"
Related
I have an image on my page representing an up arrow and, which is used to jump to the top of the page thanks to a link). This image has an opacity of "0.2", and "1" when hovering over it with the mouse.
From a smartphone or tablet, when you press on this image, the opacity remains at "1".
I would like this opacity to return to "0.2" after pressing this one.
How to do please?
My HTML code :
<img src="./img/up.png" alt="up" title="up">
My CSS code :
a > img {
width: 60%;
height: 60%;
opacity: 0.2;
}
a > img:hover {
opacity: 1;
}
Thanks
A solution with Javascript/Jquery
I modified an answer of mine of few days ago
$('#clickMe').click(function () {
$(this).addClass('tothetop');
$(this).on("animationend", function(event) {
$(this).removeClass('tothetop')
});
});
img {
opacity:0.2;
}
.tothetop {
animation-fill-mode: forwards;
animation-name: test;
animation-duration: 2s;
}
#keyframes test {
50% {opacity:1;}
100% {opacity:0.2;}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="clickMe" src="https://picsum.photos/200">
A solution using only CSS
#keyframes move {
50% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}
img {
animation-fill-mode: forwards;
opacity:0.2;
}
img:hover {
animation: move 2s;
}
<img src="https://picsum.photos/200">
A Pure CSS Solution without JavaScript
The problem lies with how best to implement :hover on interfaces where the user is not using a cursor controlled by a mouse or trackpad or a keyboard.
There isn't (yet) a perfect way to do this.
It doesn't exist, but we could imagine that the touchscreen counterpart to:
my-div:hover
might be:
my-div:touch
where the :hover behaviour is displayed for a second or two and then no longer displayed.
In the absence of a hypothetical :touch pseudo-class however, we can nevertheless implement one - and in CSS alone, without using JavaScript.
We can do this by introducing an animation for touchscreens - something like this:
#keyframes hoverForTouchScreens {
0%, 50% {
opacity: 1;
}
}
We can also ensure that this animation only fires on touchscreens with a #media query:
#media screen and (hover: none) and (pointer: coarse) {
a > img:hover {
opacity: 0.2;
animation: hoverForTouchScreens 2s ease-out;
}
}
Working Example
Putting it all together:
a > img {
opacity: 0.2;
}
a > img:hover {
opacity: 1;
}
a > img.touchscreen-simulation:hover {
opacity: 0.2;
animation: hoverForTouchScreens 2s ease-out;
}
#keyframes hoverForTouchScreens {
0%, 50% {
opacity: 1;
}
}
#media screen and (hover: none) and (pointer: coarse) {
a > img:hover {
opacity: 0.2;
animation: hoverForTouchScreens 2s ease-out;
}
}
<a href="#top">
<img src="https://picsum.photos/120/120" alt="up" title="up">
<img class="touchscreen-simulation" src="https://picsum.photos/120/120" alt="up" title="up">
</a>
<p>The <code>#media query</code> won't be active on non-touch screens, so the <strong>image on the right</strong> is set up to simulate what <em>would</em> happen on a touchscreen in this setup.</p>
Working Example:
I am trying to animate with CSS the a line through on a bit of text, but it's not actually animating, just going from hidden to displayed. Can anyone advise if what I'm trying is actually possible? If not, is there another way to achieve this?
HTML:
<div>
The text in the span <span class="strike">is what I want to strike out</span>.
</div>
CSS:
#keyframes strike{
from{text-decoration: none;}
to{text-decoration: line-through;}
}
.strike{
-webkit-animation-name: strike; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-name: strike;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
You can use a pseudo like this
Note (thanks to Phlame), this left-to-right animation won't work if the line to strike breaks in to a second line. For that one need to use yet another pseudo element and some script to position the two properly. Or use some other animation effect, e.g. like the one suggested in Oriol's answer.
#keyframes strike{
0% { width : 0; }
100% { width: 100%; }
}
.strike {
position: relative;
}
.strike::after {
content: ' ';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: black;
animation-name: strike;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
<div>
The text in the span <span class="strike">is what I want to strike out</span>.
</div>
It depends on how you want to animate it.
Since text-decoration-color is animatable, you can animate it from transparent to auto.
But this property is not widely supported yet.
#keyframes strike {
from { text-decoration-color: transparent; }
to { text-decoration-color: auto; }
}
.strike {
text-decoration: line-through;
animation: strike 4s linear;
}
<div>
The text in the span <span class="strike">is what I want to strike out</span>.
</div>
Here's a variation on the accepted answer, using an image to provide an animated "scribble" strike-through.
html {
font-family: Helvetica;
font-size: 24px;
}
.strike { position:relative; }
.strike::after {
content:' ';
position:absolute;
top:50%; left:-3%;
width:0; height:10px;
opacity:80%;
transform:translateY(-50%);
background:repeat-x url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAKAQMAAAByjsdvAAAABlBMVEUAAADdMzNrjRuKAAAAAXRSTlMAQObYZgAAADdJREFUCNdj+MMABP8ZGCQY/h9g+MHw/AHzDwbGD+w/GBhq6h8wMNj/b2BgkP8HVMMPUsn+gQEAsTkQNRVnI4cAAAAASUVORK5CYII=);
animation: strike 2s linear .3s 1 forwards;
}
#keyframes strike { to { width: 106%; } }
This thing and <span class="strike">this thing and</span> this thing.
It's very elegant, IMO, to use linear-gradient as background, and paint line which is the same color as the text (currentColor).
This solution is very flexible, opens up the door to many interesting effects and is also much less code than a pseudo-element solution.
PS: It also supports multi-line texts
From my CodePen:
span {
--thickness: .1em;
--strike: 0;
background: linear-gradient(90deg, transparent, currentColor 0) no-repeat
right center / calc(var(--strike) * 100%) var(--thickness);
transition: background-size .4s ease;
font: 25px Arial;
padding: 0 .2em;
}
span:hover {
--strike: 1; /* "1" means "true" (show the strike line) */
background-position-x: left;
}
<span contenteditable spellcheck='false'>
Strike-through animation (hover)
</span>
According to W3Schools, the text-decoration property is not animatable.
However, if you use jQuery, you can. (See here)
This is to add a spinning/loading icon for images as they load.
The existing code I'm using calls up an animated .gif image as a background image "behind" an image thumbnail, so the loading icon is visible until the thumbnail loads on top. But I want to replace the .gif with a higher quality .png and add CSS to make it rotate. It's a much cleaner look, but I don't know how or if I can add CSS style to background: url(img/loading.png)
Here's the original HTML code:
<div style="position: absolute; display: block; background: url(img/loading.png) no-repeat center center; top: 0px; left: 0px; width: 25%; height:25%;">
I want to add this CSS code to the .png to make it rotate:
.loading {
-webkit-animation:spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
animation:spin 2s linear infinite;
}
#-moz-keyframes spin { 100% {
-moz-transform:rotate(360deg);
}
}
#-webkit-keyframes spin { 100% {
-webkit-transform:rotate(360deg);
}
}
#keyframes spin { 100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
What's the best way to combine these to make my background .png image rotate?
You can animate the div with the background, you just need to add the loading class to it and with a separate class to add the other styles to it like the background url, width, height, position etc...
.load-style {
height: 64px;
width: 64px;
background: url(http://www.jasonkenison.com/uploads/blog/loading.png) no-repeat center center;
background-size: 100%;
position: absolute;
}
.loading {
-webkit-animation: spin 2s linear infinite;
-moz-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div class="loading load-style"></div>
You didn't add the class which your animating to the HTML. In your CSS you have a class called "loading" but the HTML doesn't know what to animate. In your div before the style="" tag add class="loading" and it will work, other than that your CSS works.
I am building a single page website and in a section of that site I have a CSS animation
.animation {
background-color: #54a3f7;
-webkit-animation: html 2s ease-in-out;
}
set with
#-webkit-keyframes html {
0% { width: 0%;}
100% { width: 100%; }
}
I have a working example here:
http://jsfiddle.net/RqH5H/
My problem is that this animation will (of course) start at window load, but I want it to start when the user clicks on the top menu and wants to see <section id="animations">
So when the user clicks on "Animation" it will scroll down to that section at start the animation
You will need Javascript to make this happen. You can add the class the points to CSS animation on click (or whatever interaction event you wish). I have put together a basic JSFiddle to demonstrate:
Note: jQuery is used.
http://jsfiddle.net/zensign/sg9ty/1/
$('#start-btn').click(function () {
$('#animate-me').addClass('animation');
});
what 'bout this one?
.animation {
height: 40px;
width: 100%;
}
.animation:hover {
background-color: #54a3f7;
-webkit-animation: animation 2s ease-in-out;
-moz-animation: animation 2s ease-in-out;
}
#-webkit-keyfram``es animation { 0% { width: 0%;} 100% { width: 100%; }}
#-mox-keyframes animation { 0% { width: 0%;} 100% { width: 100%; }}
replace this with ur jsfiddle html.
I have an element that I have a set of #-webkit-keyframes to animate in. On page load, these keyframes run, and the intro looks great.
Next, I have a second set of #-webkit-keyframes on hover and set to repeat, so on hover, that element has a looping animation. That also works great.
However, the instant I move the mouse away from the element, the first (intro) set of keyframes gets run again. I don't want it to run after it first runs. Is there an easy way to prevent this in CSS?
Minimal example of what I have
#e { -webkit-animation: fadeIn 1s ease-out 0.5s; } /* Fades in on load, BUT gets called when mouse moves away as well */
#e:hover { -webkit-animation: pulse 1s ease-in-out 0s infinite alternate; } /* Works fine, pulses on hover */
Also, can someone with 1500+ reputation edit the tags and add the webkit-animation tag? I can't believe it hasn't been created yet… :\
There is no pure CSS way of accomplishing what you need. You can add the animation to a parent element or to a wrapper and animate each element separately:
.wrapper {
-webkit-animation: fadeIn .5s ease-out 0 1;
}
#e {
width: 100px;
height: 100px;
background-color: #000;
}
#e:hover {
-webkit-animation: pulse 100ms ease-in-out 0s infinite alternate;
}
#-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 0.5;}
}
#-webkit-keyframes pulse {
0% { background-color: #000; }
100% { background-color: #c00; }
}
http://jsfiddle.net/3PuT2/