I have a small html like this:
h1:target {
animation: yellow-fading 0.8s linear;
}
#keyframes yellow-fading {
0% {
background-color: yellow;
}
100% {
background-color: transparent;
}
}
[Flash-title1] [Flash-title2]
<h1 id="title1">Title 1</h1>
<h1 id="title2">Title 2</h1>
My purpose is to do a background color flashing for the target I just clicked. It works(on Chrome 75), but with a flaw.
If I click [Flash-title1] twice in succession, the second click will not match the h1:target rule so the color flashing does not occur. How to solve this?
Related
I am trying to make an animated loading text. But here my duration property is not working.
Here is the html code:
<div id="Text">
Loading<span class="l1">.</span><span class="l2">.</span><span class="l3">.</span>
</div>
Here is the CSS code:
.l1{
visibility:hidden ;
color:red;
animation-name:dots;
animation-duration:1s;
animation-iteration-count:infinite ;
animation-delay:0.5s;
}
.l2{
visibility:hidden ;
color:red;
animation-name:dots;
animation-duration:2s;
animation-iteration-count:infinite ;
animation-delay:1s;
}
.l3{
visibility:hidden ;
color:red;
animation-name:dots;
animation-duration:3s;
animation-iteration-count:infinite ;
animation-delay:1.5s;
}
#keyframes dots{
from{visibility:hidden ;}
to{visibility:visible ;}
}
But the duration property is not working. The three dots are appearing one after another, but they stay constantly visible after appearing all the three dots.
But I want to make the all the three dots disappear again after appearing and to repeat it infinite time.
Thank you
.l1, .l2, .l3{
display:inline-block ;
opacity: 0;
color:red;
animation:dots 1.5s infinite ease;
animation-fill-mode: forwards;
}
.l1{
animation-delay:0.5s;
}
.l2{
animation-delay:1s;
}
.l3{
animation-delay:1.5s;
}
#keyframes dots{
0%{opacity:1 ;}
100%{opacity:0 ;}
}
<div id="Text">
Loading<span class="l1">.</span><span class="l2">.</span><span class="l3">.</span>
</div>
Instead of animating visibility, use opacity from opacity: 0 to opacity: 1
Remove visibility:hidden from all li classes
css code:
.container .elements:active{
animation: click 1s;
}
/*animations */
#keyframes click{
0%{border:solid;
border-color: white;
height: 100%;}
50%{border:solid;
border-color: blue;
height:50%}
100%{border:solid;
border-color: white;
height: 100%;}
}
When i do this, it doesn't show the entire 1s of animation if i release the mouse button, how can i do to show the entire animation if the use click?
A simple fun way is using checkbox states;
<div class='container'>
<input id='check' type='checkbox'/>
<label class='elements' for='check'>aaaa</label>
</div>
with css;
#check:checked~ .elements{animation: click 1s;}
input{display: none;}
This is really easy but not semantically correct.
The real answer:
html;
<div class='container'>
<div id='element1' onclick='ani()'>Element</div>
</div>
javascript;
<script type="text/javascript">
function ani(){
document.getElementById('element1').className ='animateclass';
setTimeout(function(){
document.getElementById("element1").classList.remove("animateclass");
}, 1000);
}
</script>
css;
.animateclass{animation: click 1s;}
I had a vue list like below:
<div v-for="item in items">
<div class="animation">{{ item.name }}</div>
</div>
And my animation is
#keyframes loadingComment {
0% {
opacity: 0.6 !important;
}
99% {
opacity: 0.6 !important;
}
100% {
opacity: 1;
}
}
However when I add an animation to to item it starts the animation whenever the page loads even tho there are 0 items inside the array. I want the animation to play when the item is added to the items array. Any ideas? I assumed this is how it would work as default?
Thanks,
Jamie
first, you need to wrap your entire list section in a transition-group if you want to add animation to your list. Read more here
<transition-group name="list">
<div v-for="item in items" :key="item.id">
<div class="animation">{{ item.name }}</div>
</div>
</transition-group>
you need to specify a name for your transition. in that way you can control your animation style in CSS.<transition-group name="list">
If you only want to use fade animation you can use transitions for that. no need for keyframes.
something like this:
.list-enter-active, .list-leave-active {
opacity: 1;
transition: opacity .5s;
}
.list-enter, .list-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
but if you really want to use keyframes, in your example you can do something like this:
.list-enter-active, .list-leave-active {
animation: loadingComment 0.5s ease-in-out forwards;
}
#keyframes loadingComment {
0% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
also, you can see the result in this jsfiddle link jsfiddle demo
I've always thought that CSS3 Animations (differently from CSS3 Transitions) once started, always finish the job, no matter if the selector is not matching anymore the element that activated them.
I'm realizing today that I was probably wrong.
In the following example, an animation is triggered by the :focus and :active pseudo-classes.
Focus on the first textfield:
if you press the tab button slowly, you will see the animations starting and ending correctly;
if you press the tab button quickly, you will see that once a new element get the focus, the old element's animation immediately ends and disappear.
#-webkit-keyframes pressed {
0%, 100% { transform : scale(1); }
50% { transform : scale(2); }
}
#keyframes pressed {
0%, 100% { transform : scale(1); }
50% { transform : scale(2); }
}
a:focus, a:active {
-webkit-animation : pressed 2s;
animation : pressed 2s;
}
a, input {
border : 1px solid silver;
padding : 5px;
height : 40px;
line-height : 28px;
margin : 0px;
display : inline-block;
width : 33.3%;
box-sizing : border-box;
background : white;
vertical-align : middle;
}
a {
color : dodgerBlue;
text-decoration : none;}
input {
color : red;
}
<input type="text" id="foo" value="Start here, then press tab" /><a href = "#">
Lorem
</a><a href = "#">
Ipsum
</a><a href = "#">
dolor
</a><a href = "#">
sit
</a><a href = "#">
amet
</a><a href = "#">
consectetur
</a><a href = "#">
adipiscing
</a><a href = "#">
elit
</a>
I know I can make it end smoothly (on some browser, eg. Firefox yes, Chrome no) by applying:
a { transition: all 2s ease; }
so that if it's loaded up to (for example) 40%, it will animate back from 40% to 0% instead of immediately dropping to 0%.
- I also know that I can use jQuery animations instead of CSS3 animation and make it work that way;
(EDIT: according to the comment, not even jQuery animations will work this way, if I got that right)
What I'm asking here, as a CSS3 Animation newbie, is:
is there a pure CSS3 way to force the animation to run up to 100%, no matter if the initial condition is not valid anymore ?
As discussed in comments there is currently no way to force an animation to complete one full cycle even after the selector rule which originally applied the animation is no longer applicable.
The only way to achieve this is by using scripting. Below is a sample snippet using JavaScript. What this does is to add a class (that has the animation property set) to the element when it gains focus and then remove it only when the animation ends.
Note:
I have used webkitAnimationEnd event in the snippet and so it would not work in other browsers. The code also needs more fine tuning because it currently removes the class only on animation end. So, if you tab out and tab in before one cycle is completed then nothing happens.
window.onload = function() {
var anchors = document.querySelectorAll('a');
for (var i = 0; i < anchors.length; i++) {
anchors[i].addEventListener('focus', function() {
addanim(this);
});
anchors[i].addEventListener('webkitAnimationEnd', function() {
endanim(this);
});
}
function addanim(el) {
el.classList.add('focus');
}
function endanim(el) {
el.classList.remove('focus');
}
}
#keyframes pressed {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(2);
}
}
.focus {
animation: pressed 2s;
}
a,
input {
border: 1px solid silver;
padding: 5px;
height: 40px;
line-height: 28px;
margin: 0px;
display: inline-block;
width: 33.3%;
box-sizing: border-box;
background: white;
}
a {
color: dodgerBlue;
text-decoration: none;
}
input {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type="text" id="foo" value="Start here, then press tab" />
Lorem
Ipsum
dolor
sit
amet
consectetur
adipiscing
elit
The animationcancel event mentioned in comments (by BoltClock) could have been more useful for our case but it is just an event that is fired when an abnormal end to the animation is encountered. We would still have to write our own code to make it continue till the end of a cycle.
I incorporated Bootstrap on my site to make it responsive. I also added in CSS animation to my code. However, this takes the text from being in the center of the page, to starting on the far left of the page, finishing the animation, and then shifting the text to the center.
How do I start the animation in the center itself?
Bootstrap Code:
<header id="top" class="header">
<div class="text-vertical-center">
<h1 class="typing">Hi, welcome to my website.</h1>
<h3 class="typing">Let's get started.</h3>
<br>
Let's Get Started.
</div>
</header>
CSS Code:
.css-typing
{
width: 100%;
white-space:nowrap;
overflow:hidden;
-webkit-animation: type 3s steps(50, end);
animation: type 3s steps(50, end)1;
}
#keyframes type{
from { width: 0; }
}
#-webkit-keyframes type{
from { width: 0; }
}
Any thoughts or help would be awesome.
Thanks!