I was playing around with styling the scrollbar and wanted to add some animations to it(HTML and CSS only). I tried this code but it's not working. Any ideas?
body::-webkit-scrollbar-thumb {
background: #196bd7;
border-radius: 10px;
animation: scrollbar1 5s infinite;
}
#keyframes scrollbar1 {
0%{ background: blue; }
25%{ background: red; }
100%{ background: chartreuse; }
}
You can't use keyframes or transitions on scrollbar
Although you can achieve it by some tricky css stylings, for more information check this out
Related
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;
}
}
I'm a bit of a newbie to CSS3 animations, but I've looked everywhere, and I can't find a solution to this problem. I have a JSP page that I want the background to slowly fade from green to blue, and then slowly fade the opposite way and repeat this process infinitely.
I currently have it go from green to blue smoothly, but then it jerks back to blue instantly. Is there a way to play two animations from green to blue, then blue to green and repeat infinitely?
Here's the CSS code I have now:
#keyframes changeColorGreenToBlue {
from { background-color: rgb(146,213,142);}
to {background-color: rgb(133,184,222);}
}
#keyframes changeColorBlueToGreen {
from {background-color: rgb(133,184,222);}
to { background-color: rgb(146,213,142);}
}
.jumbotron {
height: 100%;
width: 100%;
background-color: green;
animation: changeColorGreenToBlue ease;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-fill-mode: both;
animation-name: changeColorBlueToGreen;
animation-iteration-count: infinite;
animation-duration: 4s;
background-size: cover;
background-repeat: repeat-y;
margin-bottom:1px;
}
It's a little messy because I was just trying everything to get it working. Sorry about that!
Rather than two keyframe animations, you want one that changes the background color twice (once at 50%, and back at 100%), like this:
#keyframes changeColor {
0% {
background-color: rgb(146,213,142);
}
50% {
background-color: rgb(133,184,222);
}
100% {
background-color: rgb(146,213,142);
}
}
See my codepen for example in action.
I'm building a small website and would like to get the text (and an image when I add one) to fade in when someone accesses the website?
Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
body {
background-color: lightgrey;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
</style>
<style>
p.one {
border: 1px lightgrey;
background-color: lightgrey;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 0px;
}
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Our Routes</li>
<li>Contact</li>
<li>About</li>
</ul>
<img class="displayed" src="E:\Users\PC\Documents\Image" alt="...">
<h1 align="center"> HOME </h1>
<p class="one" , align="center"> Text Goes here
</p>
</body>
</html>
http://codepen.io/JTBennett/pen/GorVRL [your site w/ fade and motion]
http://codepen.io/JTBennett/pen/BjpXRo [example of the following instructions]
Here's an example. The HTML requires a div to be wrapped around the whole of the body content if you want it to fade in all at once. Look for this:
<div class="wrapper fade-in">
There's a lot of stuff you can do with CSS, I've been using it for years and I still learn something new every once in a while.
All the animation commands will appear in your CSS like so:
#keyframes fadeIn
to {
opacity: 1; }
Then your divs are going to have a class that calls the animation (#keyframes):
.fade-in {
animation: fadeIn 1.0s ease forwards;
[other div properties can be included here]
}
The HTML will look like this:
<div class="fade-in">
[content]
</div>
Finally, you'll need to make sure you include the vendor codes to make it compatible with all browsers [which adds a fair amount of code, which is why jQuery can be a better option for this stuff]:
#keyframes fadeIn{
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-o-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
The vendor codes will have to be duplicated again in your div class in the CSS:
.fade-in {
animation: fadeIn ease 5s;
-webkit-animation: fadeIn ease 5s;
-moz-animation: fadeIn ease 5s;
-o-animation: fadeIn ease 5s;
-ms-animation: fadeIn ease 5s;
}
The effect can be achieved with jQuery much quicker, as you can see in one of the other answers here.
After you've learned to do it by hand, I suggest playing around with this CSS3 animation generator if you want to save a bit of time:
http://cssanimate.com/
Just make sure you understand it first though.
Lastly, this is an example of jQuery performing similar functions (though using SVGs instead of divs this time, same process though):
http://codepen.io/JTBennett/pen/YwpBaQ
I don't know what element you have but you can do a few things.
If you are using javascript, or jquery you can make an element fade in easily.
Jquery:
$(document).ready(function(){
$('.myItemClass').fadeIn();
});
You can also do it with just CSS
CSS:
/* The animation code */
#keyframes example {
from {opacity: 0;}
to {opacity: 1;}
}
.myClass {
animation-name: example;
animation-duration: 1s;
}
You can fade in elements when the document loads by loading the page with the elements hidden (opacity : 0;) in CSS. Then on document ready you can remove the class, so long as it has a transition for that css property—you'll have an effect.
CSS
div {
transition: opacity 2s;
opacity: 1;
}
.hidden {
opacity: 0;
}
JS
$(document).ready(function(){
$('.hidden').removeClass('hidden');
});
It is very simple don't need even jqyery, pure CSS and pure Javascript.
CSS
body {
opacity:0;
transition: 300ms opacity;
}
Javascript
function pageLoaded() {
document.querySelector("body").style.opacity = 1;
}
window.onload = pageLoaded;
I've followed a short tutorial to create a bouncing arrow however the code I've used it pretty much the same excluding small differences.
However, when I add it to my hero unit, it doesn't play my animation.
It could be the transform or keyframe mixins I used...
Here is the JSFiddle: http://jsfiddle.net/x9hxfusa/
Place the keyframes & mixins declarations at the top. You have to declare them before calling them.
See Demo
I tweaked and simplified your code, I think you can arrange the animation itself to be smoother, up to your liking. Remember to add cross browser support or at least use SCSS to manage it: jsFiddle
CSS
body { background-color: black; }
.arrow {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 40px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
background-size: contain;
}
.bounce {
-webkit-animation: bounce 2s infinite;
}
#-webkit-keyframes bounce {
0% { bottom:5px; }
25%, 75% { bottom:15px; }
50% { bottom:20px; }
100% { bottom:0; }
}
I also think the key issue is with the mixins, however I stirred away from it to find a simpler solution for you.
Edit: I tried doing the following initially but I missed refreshing my jsFiddle and missed the obvious solution, which is now highlighted by #Oriol. Anyways, the issue is that your keyframe & mixin code is being positioned after the animation code (or at the top of your CSS for simplicity's sake). If you wish to keep your code as is just do that, or you can try my simplified solution.
You must declare
#mixin transform($transforms) {
-moz-transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-webkit-transform: $transforms;
transform: $transforms;
}
#mixin keyframes($animation-name) {
#-webkit-keyframes $animation-name {
#content;
}
#-moz-keyframes $animation-name {
#content;
}
#-ms-keyframes $animation-name {
#content;
}
#-o-keyframes $animation-name {
#content;
}
#keyframes $animation-name {
#content;
}
}
#mixin animation($str) {
-webkit-animation: #{$str};
-moz-animation: #{$str};
-ms-animation: #{$str};
-o-animation: #{$str};
animation: #{$str};
}
before include keyframes and transform. You must also set the bounce class in a different way (remove ''):
.bounce {
#include animation(bounce 2s infinite);
}
http://jsfiddle.net/uth333cg/
I'd like to create a element which overlays a part of a page using position: absolute. This element would be 50% opaque and blink between red and transparent. A bit like what OSX uses (used?) to do for the default button of a dialog.
How to create a infinite animation loop with CSS3?
How to cycle between two background colours in this loop?
Which browsers is possible support today through CSS3 animation?
jQuery animation is an alternative, but I'd like to try CSS3 approach first.
The first 2 questions are answered by the spec.
To loop: animation-iteration-count: infinite;
And cycling the background color involves specifying a #keyframes rule.
body { background: #0ff; }
#-webkit-keyframes blink {
0% { background: rgba(255,0,0,0.5); }
50% { background: rgba(255,0,0,0); }
100% { background: rgba(255,0,0,0.5); }
}
#keyframes blink {
0% { background: rgba(255,0,0,0.5); }
50% { background: rgba(255,0,0,0); }
100% { background: rgba(255,0,0,0.5); }
}
#animate {
height: 100px;
width: 100px;
background: rgba(255,0,0,1);
}
#animate {
-webkit-animation-direction: normal;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: blink;
-webkit-animation-timing-function: ease;
animation-direction: normal;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-name: blink;
animation-timing-function: ease;
}
(don't forget any applicable vendor prefixes!)
As far as browser support goes, i couldn't tell you specifics, but in any case i would recommend feature detect via modernizr and a javascript fallback.
Here is an example that works in webkit and fulfills at least some of your requirements. NOTE: I don't use a mac so i wasn't sure the specifics of the effect you referenced.
Once you've set the animation up in the stylesheet (-webkit-transition:), you can simply change the color with JavaScript.
function toggleColor(element)
{
var red = "rgba(255,0,0,0.5)";
var transparent = "rgba(255,0,0,0)";
element.style.backgroundColor = ((element.style.backgroundColor == red) ? transparent : red);
window.setTimeout(function()
{
toggleColor(element);
});
}
Currently, only Webkit browsers (Safari & Chrome) support CSS-Animations.