I'm currently trying to create a blinking eye effect with HTML and CSS. My problem is that the under part (eyelid) is moving the wrong way. It should be animated counterwise in order to look like the desired effect.
I already tired a lot of things to make it work and don't have any idea what else to do.
Here's my CSS. Is this a problem where some JS is needed as well?
.upper-eye {
background: linear-gradient(to bottom,
rgb(0, 0, 0),
rgba(255,255,255, 0) 10%);
width: 100%;
height: 300%;
z-index: 0;
position: fixed;
top:0;
left:0;
animation: bounce 2s linear infinite;
}
.under-eye {
background: linear-gradient(to top,
rgb(0, 0, 0),
rgba(255,255,255, 0) 10%);
width: 100%;
height: 300%;
z-index: 100;
position: fixed;
bottom: -10px;
left: 0;
animation: bounce 2s linear infinite;
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-30px);}
60% {-webkit-transform: translateY(-15px);}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-30px);}
60% {transform: translateY(-15px);}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}
The problem is that you're using the same #keyframes and expecting a different action. You might need to make a second #keyframes setting to do what you want but the other way around, then you could set that #keyframes to the bottom eyelid.
So it could look something like this:
#-webkit-keyframes bounceReverse {
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
40% {-webkit-transform: translateY(-15px);}
60% {-webkit-transform: translateY(-30px);}
}
keyframes bounceReverse {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-15px);}
60% {transform: translateY(-30px);}
}
bounceReverse {
webkit-animation-name: bounceReverse;
animation-name: bounceReverse;
}
You could also try using animation-direction: reverse; on the existing #keyframes animation to reverse the effect of the keyframe you're seeing correctly on the top eyelid.
I am developing an interactive touchscreen at my work which has four tiles on the main screen that look much like the Windows logo. At the moment they are different static colours and they don't look 'alive' and interactive. I want to make them glow or pulsate slightly in random areas and intervals. I thought about creating a white radial gradient and moving it randomly around the outside of each tile so the tile gradient changed, however, I am not sure how to code this in CSS.
I have tried to adapt some copied code that uses radial gradient animations that cycles through the complete hue gradient. The problem with this is I don't want to change the colours because they form the background for text (which can mess with the contrast). The changes can also be rather dramatic, going from a dark colour to very bright, which again messes with the text contrast.
I have already tried a linear gradient but am not happy with it as it is rather predictable and boring (the same gradient going back and forth).
What I am after ideally would be something like this:
Here is a code snippet of what is currently running:
body,html{
margin:0;
padding:0;
height:100%;
}
.box{
height:100%;
width:100%;
}
.gradDynamic{
position:relative;
}
.gradDynamic:after, .gradDynamic:before{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
z-index:-1;
}
.gradDynamic:after{
background:radial-gradient(circle,red,transparent);
background-size:400%;
animation:colorSpin 30s linear infinite;
}
.gradDynamic:before{
background-color:yellow;
}
#keyframes colorSpin{
25%{background-position:0 100%}
50%{background-position:100% 100%}
75%{background-position:100% 0}
100%{filter:hue-rotate(360deg)}
}
<div class="box gradDynamic"></div>
I have achieved the animated background with linear gradient background. Lets try this example and comment for further assistance.
.gradient {
height: 400px;
width: 100%;
background: linear-gradient(180deg, #1846c4, #98b2ff, #1846c4);
background-size: 200% 200%;
-webkit-animation: Animation 8s ease infinite;
-moz-animation: Animation 8s ease infinite;
animation: Animation 8s ease infinite;
}
#-webkit-keyframes Animation {
0% {
background-position: 10% 0%;
}
50% {
background-position: 91% 100%;
}
100% {
background-position: 10% 0%;
}
}
#-moz-keyframes Animation {
0% {
background-position: 10% 0%;
}
50% {
background-position: 91% 100%;
}
100% {
background-position: 10% 0%;
}
}
#keyframes Animation {
0% {
background-position: 10% 0%;
}
50% {
background-position: 91% 100%;
}
100% {
background-position: 10% 0%;
}
}
<div class="gradient"></div>
Updated fiddle.
#demo {
width: 100%;
height: 300px;
position: relative;
background: linear-gradient(to bottom, #3bd6f7 0%, #1539b9 100%);
z-index: 2;
}
#demo:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "";
z-index: -1;
}
#demo::after {
background-size: 400%;
background-size: 400%;
animation: colorSpin 40s linear infinite;
background: radial-gradient(ellipse at top, rgba(0, 0, 0, 0.1), transparent);
}
#demo::after {
background: radial-gradient(ellipse at bottom, rgba(0, 0, 0, 0.1), transparent);
}
#keyframes colorSpin {
25% {
background-position: 0 100%
}
50% {
background-position: 100% 100%
}
75% {
background-position: 100% 0
}
100% {
filter: hue-rotate(360deg)
}
}
#demo::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to top, #1539b9 0%, #1539b9 100%);
opacity: 0;
animation: bg 2800ms ease-in-out 3s infinite alternate-reverse;
z-index: -1;
}
#keyframes bg {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="demo">Demo</div>
This is my code:
.arrow
{
position: relative;
bottom: -2rem;
left: 50%;
margin-left:-20px;
width: 40px;
height: 40px;
/**
* Dark Arrow Down
*/
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzIGlkPSJkZWZzNCIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTU0MC4zNjIyKSI+PHBhdGggZD0ibSAxMjcuNDA2MjUsNjU3Ljc4MTI1IGMgLTQuOTg1MywwLjA3ODQgLTkuOTEwNzcsMi4xNjMwOCAtMTMuNDM3NSw1LjY4NzUgbCAtNTUsNTUgYyAtMy42MDA1NjUsMy41OTkyNyAtNS42OTY4ODMsOC42NTg5NSAtNS42OTY4ODMsMTMuNzUgMCw1LjA5MTA1IDIuMDk2MzE4LDEwLjE1MDczIDUuNjk2ODgzLDEzLjc1IEwgMjQyLjI1LDkyOS4yNSBjIDMuNTk5MjcsMy42MDA1NiA4LjY1ODk1LDUuNjk2ODggMTMuNzUsNS42OTY4OCA1LjA5MTA1LDAgMTAuMTUwNzMsLTIuMDk2MzIgMTMuNzUsLTUuNjk2ODggTCA0NTMuMDMxMjUsNzQ1Ljk2ODc1IGMgMy42MDA1NiwtMy41OTkyNyA1LjY5Njg4LC04LjY1ODk1IDUuNjk2ODgsLTEzLjc1IDAsLTUuMDkxMDUgLTIuMDk2MzIsLTEwLjE1MDczIC01LjY5Njg4LC0xMy43NSBsIC01NSwtNTUgYyAtMy41OTgxNSwtMy41OTEyNyAtOC42NTA2OCwtNS42ODEyNyAtMTMuNzM0MzgsLTUuNjgxMjcgLTUuMDgzNjksMCAtMTAuMTM2MjIsMi4wOSAtMTMuNzM0MzcsNS42ODEyNyBMIDI1Niw3NzguMDMxMjUgMTQxLjQzNzUsNjYzLjQ2ODc1IGMgLTMuNjY2NzgsLTMuNjY0MjMgLTguODQ4MDEsLTUuNzY0NDIgLTE0LjAzMTI1LC01LjY4NzUgeiIgaWQ9InBhdGgzNzY2LTEiIHN0eWxlPSJmb250LXNpemU6bWVkaXVtO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO2xpbmUtaGVpZ2h0Om5vcm1hbDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO2RpcmVjdGlvbjpsdHI7YmxvY2stcHJvZ3Jlc3Npb246dGI7d3JpdGluZy1tb2RlOmxyLXRiO3RleHQtYW5jaG9yOnN0YXJ0O2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2NvbG9yOiMwMDAwMDA7ZmlsbDojMjIyMjIyO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozOC44ODAwMDEwNzttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZvbnQtZmFtaWx5OlNhbnM7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zIi8+PC9nPjwvc3ZnPg==);
background-size: contain;
}
.bounce {
animation: bounce 2s infinite;
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
The image in the background image is black. I want to change the color of this image. Can I add an overlay or something? Or do I have to create a new svg+xml;base64 image? Beacause I do not know how to do this.
You can't do this. You will have to create another image.
I am trying to put a 100% color ribbon into the header of my website, similar to: http://mightyslider.com/
The color ribbon in the header is using simple css style that has all the info, colors, div position etc. I can create a color ribbon similar to this but it does not animate? Is there something out there jquery or CSS3 that is similar to it?
html:
<div id="header-colors"></div>
css:
#header-colors {
animation-delay: 0s;
animation-direction: reverse;
animation-duration: 15s;
animation-iteration-count: infinite;
animation-name: header-colors;
animation-timing-function: linear;
background-image: -moz-linear-gradient(left center , #f5aa00 0px, #f5aa00 12.5%, #55c5e9 12.5%, #55c5e9 25%, #6b3a78 25%, #6b3a78 37.5%, #9e1c32 37.5%, #9e1c32 50%, #0768bf 50%, #0768bf 62.5%, #629db1 62.5%, #629db1 75%, #f5aa00 75%, #f5aa00 87.5%, #55c5e9 87.5%, #55c5e9 100%);
background-size: 100% auto;
height: 10px;
left: 0;
position: absolute;
width: 100%;
}
Any help is appreciated.
It works fine?
Look at this jsfiddle I just made.
http://jsfiddle.net/89BuE/2/
HTML:
CSS:
#header-colors {
position: absolute;
top: 0;
left: 0;
height: 10px;
width: 100%;
background-image:-webkit-gradient(linear,0 50%,100% 50%,color-stop(0,#e75239),color-stop(12.5%,#e75239),color-stop(12.5%,#ff961c),color-stop(25%,#ff961c),color-stop(25%,#ffcc27),color-stop(37.5%,#ffcc27),color-stop(37.5%,#fce62f),color-stop(50%,#fce62f),color-stop(50%,#cde35b),color-stop(62.5%,#cde35b),color-stop(62.5%,#82cc33),color-stop(75%,#82cc33),color-stop(75%,#41bece),color-stop(87.5%,#41bece),color-stop(87.5%,#049cdb),color-stop(100%,#049cdb));
background-image:-moz-gradient(linear,0 50%,100% 50%,color-stop(0,#e75239),color-stop(12.5%,#e75239),color-stop(12.5%,#ff961c),color-stop(25%,#ff961c),color-stop(25%,#ffcc27),color-stop(37.5%,#ffcc27),color-stop(37.5%,#fce62f),color-stop(50%,#fce62f),color-stop(50%,#cde35b),color-stop(62.5%,#cde35b),color-stop(62.5%,#82cc33),color-stop(75%,#82cc33),color-stop(75%,#41bece),color-stop(87.5%,#41bece),color-stop(87.5%,#049cdb),color-stop(100%,#049cdb));
background-image: gradient(linear,0 50%,100% 50%,color-stop(0,#e75239),color-stop(12.5%,#e75239),color-stop(12.5%,#ff961c),color-stop(25%,#ff961c),color-stop(25%,#ffcc27),color-stop(37.5%,#ffcc27),color-stop(37.5%,#fce62f),color-stop(50%,#fce62f),color-stop(50%,#cde35b),color-stop(62.5%,#cde35b),color-stop(62.5%,#82cc33),color-stop(75%,#82cc33),color-stop(75%,#41bece),color-stop(87.5%,#41bece),color-stop(87.5%,#049cdb),color-stop(100%,#049cdb));
-webkit-animation: headercolors 15s linear 0s infinite;
animation: headercolors 15s linear 0s infinite;
}
#-webkit-keyframes headercolors {
from {
background-position:0 bottom;
}
to {
background-position:1600px bottom;
}
}
#keyframes headercolors {
from {
background-position:0 bottom;
}
to {
background-position:1600px bottom;
}
}
Basically the gradient background is treated as an image and you can simple move it by using background-position.
You need to specify a background image larger than the width, and then animate the position
CSS
#header-colors {
animation-direction: reverse;
animation: header-colors infinite 15s linear;
-webkit-animation: header-colors infinite 15s linear;
background-image: linear-gradient(to left, #f5aa00 0px, #f5aa00 12.5%, #55c5e9 12.5%, #55c5e9 25%, #6b3a78 25%, #6b3a78 37.5%, #9e1c32 37.5%, #9e1c32 50%, #0768bf 50%, #0768bf 62.5%, #629db1 62.5%, #629db1 75%, #f5aa00 75%, #f5aa00 87.5%, #55c5e9 87.5%, #55c5e9 100%);
background-size: 200% auto;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
#-webkit-keyframes header-colors {
0% {background-position-x: 0%;}
100% {background-position-x: 100%;}
}
#keyframes header-colors {
0% {background-position-x: 0%;}
100% {background-position-x: 100%;}
}
demo
Note: right now, it will jump at the end of the animation. To avoid that, you need to set 2 identical cycles of the color strips in the background image (so that one part overlaps the other at th end of the animation
In Firefox, background-position-x is not working. change this to make it work
#keyframes header-colors {
0% {background-position: 0% 0px;}
100% {background-position: 100% 0px;}
}