I have a limited area to show a long text. It should be wrapped with ellipsis. When you mouse over it, it should be scrolled until end of it so I came up with this but I have some problems.
It doesn't work on Opera Browser.
It uses static width property.
div.content:hover {
width:742px;
}
Even text is shorter; it scrolls in a static duration.
How can I solve this?
EDIT: I solved all these problems with JavaScript but a pure CSS3 solution will be still great because I hate injecting CSS rules inside of my JavaScript Code. http://fiddle.jshell.net/tU43F/18/
test with this : (u can modify the right attributes in animation same as u want)
div.content:hover {
-webkit-animation: slide 5.0s linear;
-moz-animation: slide 5.0s linear;
-o-animation: slide 5.0s linear;
animation: slide 5.0s linear;
width:742px;
right:0px;
text-overflow: clip;
}
#-webkit-keyframes slide {
0% { right:-665px;}
50% { right:-340px;}
100% { right:-0px; }
}
#-moz-keyframes slide {
0% { right:-665px;}
50% { right:-340px;}
100% { right:-0px; }
}
#-o-keyframes slide {
0% { right:-665px;}
50% { right:-340px;}
100% { right:-0px; }
}
#-khtml-keyframes slide {
0% { right:-665px;}
50% { right:-340px;}
100% { right:-0px; }
}
#keyframes slide {
0% { right:-665px;}
50% { right:-340px;}
100% { right:-0px; }
}
Related
Is there a way to 'movie credits style' scroll down on a webpage with pure CSS ? I'm building a wordpress simple website / webpage and looking for this trick but can't find anything anywhere. For simplicity purpose I'm looking for pure CSS solutions and curious if there's any.
I tried this but it doesn't work
.page-id-39{
animation: scroll-down 2000s linear infinite;
}
#keyframes scroll-down {
0% { transform: translateY(0); }
100% { transform: translateY(100vh); }
}
The (WIP!) page that's supposed to auto scroll down https://wagmigeneration.net/wagmi/
I used this and it works
body {
height: 100%;
margin: 0;
overflow: hidden;
}
body {
animation: scroll-up 1600s linear infinite;
}
#keyframes scroll-up {
from {
transform: translateY(0%);
}
to {
transform: translateY(-100%);
}
}
.about5 {
animation:
fade 4s ease forwards; animation-delay: 5s;}
#keyframes fade {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0;}}
<div class="about5">About</div>
The animation delays for 5s correctly, but before fading, flashes once. Why? Is this because I'm using ease and should I use linear?
Page on desktop here.
If you only want your content to fade-out, you could set the opacity to the 0% keyframe at 1 like this:
...
#keyframes fade {
0% { opacity: 1; }
50% { opacity: 1; }
100% { opacity: 0;}}
For more information about ease & linear, this post could explain it way better than I could :)
I implemented a blinkingtext animation on my system to keep blinking red, but I want it only on the screen that I am putting the code and not at all.
Follow the code below.
/deep/ nb-layout-header nav {
animation:blinkingText 1s infinite;
}
#keyframes blinkingText {
0% {
background-color: #374355;
}
100%{
background-color: #D42333;
}
}
Try using this JSFiddle in Chrome and in Firefox.
Here's the code:
(HTML)
<div class="slide-down">
<h1>Hello!</h1>
</div>
(CSS)
.slide-down {
font-size: 3em;
-moz-animation-duration: 3s;
-webkit-animation-duration: 3s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-moz-animation-name: slideDown;
-webkit-animation-name: slideDown;
}
#-moz-keyframes slideDown {
0% {
-moz-transform:translateY(-300px);
}
100% {
-moz-transform:translateY(0px);
}
}
#-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(-300px);
}
100% {
-webkit-transform: translateY(0px);
}
}
My issue is that it works in Chrome but only works in Firefox when the starting coordinates (at the "0%" point of the animation) of the animated div are within the viewport. Otherwise, it can completely skip the animation. Try changing the translateY() parameter to something more conservative, like -50px, and it will work.
Is there a workaround for this? It would be nice to be able to bring something in from outside the screen without having to write a script to figure out what its initial y-coordinate should be.
I would consider animating the margin instead:
.slide-down {
font-size: 3em;
animation:slideDown 3s forwards;
}
#keyframes slideDown {
0% {
margin-top:-300px;
}
100% {
margin-top:0;
}
}
<div class="slide-down">
<h1>Hello!</h1>
</div>
I have a div with an intro animation and on click I add a new class called 'exit' with a new animation, but the animation dont work.
div { animation: intro steps(14) 1s 1;
animation-fill-mode: forwards;
}
div.exit { animation: exit steps(18) 1s 1;
animation-fill-mode: forwards;
}
Any ideas?
It is working fine, you got it wrong in following code.
You forgot to add px after 500.
FIDDLE
#-webkit-keyframes exit {
0% {
left:500px;
}
100% {
left:0;
}
}
The animation is working, but you tell it to go to 0px.
If you say:
#keyframes exit {
0% { background:yellow; }
100% { background:black; }
}
It is working: http://jsfiddle.net/fsqp7vgk/1/
So, the animation is working, but you tell it again to go to position 0px. The solution is to specify in .exit {left:500px;} //your previous position.
Here it is with move animation: http://jsfiddle.net/fsqp7vgk/2/
.exit {animation:exit 5s 1; left:500px; }
#keyframes intro {
0% { left:100px; }
100% { left:500px; }
}
#keyframes exit {
0% { left:500px; }
100% { left:0px; }
}
Of course, keep -webkit- prefix if you use chrome.