I have problem to get this border animation working on other browsers (IE).
http://babarogic.disclosed.site check for live preview or snippet down.
Did alot of search on this problem and none of it worked for me. Maybe i am making mistake somewhere.
Thank you
body {
background-color: black;
}
.border-main {
position: fixed;
right: 0%;
left: 0%;
top: 0%;
bottom: 0%;
width: 75%;
/* 90% of viewport vidth */
height: 60%;
/* ratio = 9/16 * 90 = 50.625 */
max-height: 70vh;
max-width: 140vh;
/* 16/9 * 90 = 160 */
margin: auto;
overflow: hidden;
border: 1px solid #000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
z-index: 9;
pointer-events: none;
-webkit-animation: clipMe 8s linear infinite;
animation: clipMe 8s linear infinite;
-webkit-border-image:
-webkit-gradient(linear, 0 100%, 0 0, from(white), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image:
-webkit-linear-gradient(bottom, white, rgba(0, 0, 0, 0)) 1 100%;
-o-border-image:
-o-linear-gradient(bottom, white, rgba(0, 0, 0, 0)) 1 100%;
border-image:
-webkit-gradient(linear, left bottom, left top, from(white), to(rgba(0, 0, 0, 0))) 1 100%;
border-image:
linear-gradient(to top, white, rgba(0, 0, 0, 0)) 1 100%;
}
#-webkit-keyframes clipMe {
0% { height: 0%; }
100% { height: 60%; }
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
#keyframes clipMe {
0% { height: 0%; }
100% { height: 60%; }
0%, 100% { opacity: 0; }
50% { opacity: 1; }
}
<div class="border-main"></div>
It works on IE11 here if you put some order in the animation frames:
#keyframes clipMe {
0% { height: 0%; opacity: 0; }
50% { opacity: 1; }
100% { height: 60%; opacity: 0; }
}
Check the result here.
According to MDN, IE11 is doing the right thing: discard repeated keyframes taking only the latest.
If a keyframe is defined multiple times but not all affected
properties are in each keyframe, only the values specified in the
latest keyframe are considered.
Related
I am trying to make a CSS marquee whose text fades in from the right edge and fades out on the left edge. Only the letters on the edges should turn transparent. I'd call it an "opacity mask" that is feathered onto the left/right edges.
I can find CSS marquee code samples but none with such a fade in/out effect. I'd also like the background to be completely transparent, with just the text having the edge effects.
I've tried adding a gradient to the container but, in hind sight, that doesn't seem to be the right path. Below is the code I've come up with thus far. Please assist, thanks!
#Bernard Borg: I've updated my code with the second new sample. Other than this not using opacity - and therefore being A) dependent on being hardcoded to the underlying background color and B) only working on a solid background - this is acceptable for my use case. Thanks! (Any idea how to cover the marquee with opacity rather than a color?)
div#container {
width: 60%;
height: 100%;
position: absolute;
background-color: #e6e9eb;
}
div#marquee-container {
overflow: hidden;
}
p#marquee {
animation: scroll-left 10s linear infinite;
}
#keyframes scroll-left {
0% {transform: translateX( 140%)}
100% {transform: translateX(-140%)}
}
div#marquee-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
background: linear-gradient(to right, rgba(230, 233, 235, 1) 0%, rgba(230, 233, 235, 0) 15%, rgba(230, 233, 235, 0) 85%, rgba(230, 233, 235, 1) 100%);
}
<div id="container">
<div id="marquee-container">
<p id="marquee">The quick brown fox jumps over the lazy dog</p>
<div id="marquee-cover"/> <!--thanks Bernard Borg-->
</div>
</div>
For anyone coming to this question in the future - the answer to this question was a joint effort. Find the answer in the question.
This is the closest I was able to get to your updated question;
body {
margin: 0;
}
#container {
width: 100%;
height: 100vh;
background-color: grey;
display: flex;
align-items: center;
}
#marquee-container {
overflow: hidden;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
p#marquee {
font-family: 'Segoe UI', sans-serif;
font-size: 30px;
font-weight: bold;
height: 80%;
animation: scroll-left 5s linear infinite;
white-space: nowrap;
}
#first-cover,
#second-cover {
height: 100vw;
backdrop-filter: opacity(50%);
width: 30vw;
z-index: 100;
}
#first-cover {
background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(128, 128, 128, 0.2));
}
#second-cover {
background: linear-gradient(-90deg, rgba(0, 0, 0, 0.8), rgba(128, 128, 128, 0.2));
}
#keyframes scroll-left {
0% {
transform: translateX(130%);
}
100% {
transform: translateX(-130%);
}
}
<div id="container">
<div id="marquee-container">
<div id="first-cover"></div>
<p id="marquee">The quick brown fox jumps over the lazy dog</p>
<div id="second-cover"></div>
</div>
</div>
For some reason backdrop-filter (specifically with opacity) isn't doing anything. Weird.
Edit:
You could probably define an image for the background of the marquee (with gradients on each side) and then use mix-blend-mode in some way to fade the text. Perhaps I'm overcomplicating this. ¯\(ツ)/¯
Animate the opacity property (cleaned up the code for better readability);
body {
margin: 0;
}
div#marquee-container {
width: 600px;
height: 150px;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 0) 100%);
}
p#marquee {
text-align: right;
animation: scroll-left 10s linear infinite;
}
#keyframes scroll-left {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
transform: translateX(-80%);
opacity: 0;
}
}
<div style="background-color: black; width: 100%; height: 100%;">
<div id="marquee-container">
<p id="marquee">Testing</p>
</div>
</div>
Side note: You don't need vendor prefixes for animation anymore.
div#container {
width: 100%;
height: 100%;
position: absolute;
background-color: grey;
}
div#marquee-container {
width: 600px;
height: 150px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 85%, rgba(255,255,255,0) 100%);
}
p#marquee {
width: 80%;
height: 80%;
--opacity: 0;
moz-animation: scroll-left 1s linear infinite;
-webkit-animation: scroll-left 1s linear infinite;
animation: scroll-left 10s linear infinite;
}
#-moz-keyframes scroll-left {
0% {-moz-transform: translateX( 100%);}
100% {-moz-transform: translateX(-100%);}
}
#-webkit-keyframes scroll-left {
0% {-webkit-transform: translateX( 100%)}
100% {-webkit-transform: translateX(-100%)}
}
#keyframes scroll-left {
0% {-moz-transform: translateX( 100%); -webkit-transform: translateX( 100%); transform: translateX( 100%); opacity: 0;}
30%{
opacity: 1;
}
60%{
opacity: 0;
}
100% {-moz-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%);opacity: 0; }
}
}
<div id="container">
<div id="marquee-container">
<p id="marquee">Testing</p>
</div>
</div>
I want to create a gradient border animation starting from the top left to the bottom right. The animation will be used for images within this div.
I tried every degree of angle, but didn't get this to work in the direction I want, it always starts at the right top or at the bottom right.
Also tried it with negative degree values.
.block {
position: relative;
margin: 30px auto 0;
width: 250px;
height: 250px;
background: #272727;
}
.block:before, .block:after {
content: '';
position: absolute;
left: -1px;
top: -1px;
background: linear-gradient(45deg, rgba(0,0,0,0)35%, rgba(0,204,255,1)50%, rgba(0,0,0,0)65%);
background-size: 400%;
width: calc(100% + 2px);
height: calc(100% + 2px);
z-index: -1;
animation: shine 8s linear infinite;
}
#keyframes shine {
to {
background-position: 400% center;
}
}
.block:after {
filter: blur(8px);
}
<div class="block"></div>
Update your code like below:
.block {
position: relative;
margin: 30px auto 0;
width: 250px;
height: 250px;
background: #272727;
}
.block:after {
content: '';
position: absolute;
inset: -1px;
background: linear-gradient(-45deg, rgba(0, 0, 0, 0)35%, rgba(0, 204, 255, 1)50%, rgba(0, 0, 0, 0)65%);
background-size: 400% 400%;
z-index: -1;
animation: shine 3s linear infinite;
filter: blur(8px);
}
#keyframes shine {
from {
background-position: 100% 100%
}
to {
background-position: 0 0
}
}
<div class="block"></div>
I was wondering if it was possible to split a screen into 2 parts diagonally as shown on the picture. Once I'd hover over Picture A, the diagonal line would shift a bit to the right, revealing more of picture A while hiding a bit of picture B (I'm thinking transition?), and when I'd hover over picture B the opposite would happen.
Thanks in advance,
Martin
The diagonal image transition effect is unique request. I tried my best, Can you please check revealing effect.
section {
border: 1px solid black;
display: flex;
width: 400px;
box-sizing: border-box;
}
.diagonalHover {
position: absolute;
width: 66%;
height: 200px;
transition: all 0.3s ease-out;
}
.diagonalHover.first,
.diagonalHover.second {
background-image: url(https://cdn.pixabay.com/photo/2016/07/20/22/33/vajdahunyadvar-1531470_960_720.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.diagonalHover.second {
background-image: url(https://cdn.pixabay.com/photo/2020/02/05/22/17/vendetta-4822543__340.jpg);
}
.diagonalHover.first:hover {
width: 75%;
z-index: 1;
}
.diagonalHover.second:hover {
width: 75%;
z-index: 1;
}
.diagonalHover.first:hover + .second {
}
.diagonalHover.first {
left: 0;
top: 0;
-webkit-clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 50% 100%, 0% 100%);
}
.diagonalHover.second {
right: 0;
top: 0;
-webkit-clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(50% 0, 100% 0%, 100% 100%, 0% 100%);
}
<section>
<div class="diagonalHover first">
</div>
<div class="diagonalHover second">
</div>
</section>
I want to have a straight line in my header, and then a few seconds after the page loads, I want those lines to slowly move down until they look like the one in the image below:
I thought of using css transform property to rotate two rotate two divs, but that does not seem to be a solution as you can see the result in my pen here
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div id="big">
<div class="arrow-box">
<div class="line line-1"></div>
<div class="line line-2"></div>
</div>
</div>
CSS:
#big{
background: red;
height: 200px;
}
.arrow-box{
max-width: 200px;
margin: 0 auto;
padding-top: 10px;
}
.line{
background: white;
width: 60px;
height: 1px;
}
.line-1{
transform: rotate(20deg);
}
.line-2{
transform: rotate(-20deg);
}
How can I make a/the line look like the icon on the image after the page loads?
You could do this using css animation. You could use rotateZ transform to create arrow shape and also scale to keep increasing width of the lines as animation goes.
You also need to use transform-origin for both parts to transform at the right point.
.line {
position: relative;
width: 100px;
}
.line:after,
.line:before {
background: black;
position: absolute;
content: "";
height: 2px;
width: 50%;
bottom: 0;
}
.line:before {
left: 0;
animation: moveBefore 1s linear forwards;
transform-origin: center left;
}
.line:after {
right: 0;
animation: moveAfter 1s linear forwards;
transform-origin: center right;
}
#keyframes moveBefore {
0% {
transform: rotateZ(0) scale(1, 1);
}
50% {
transform: rotateZ(15deg) scale(1.05, 1);
}
100% {
transform: rotateZ(30deg) scale(1.16, 1);
}
}
#keyframes moveAfter {
0% {
transform: rotateZ(0) scale(1, 1);
}
50% {
transform: rotateZ(-15deg) scale(1.05, 1);
}
100% {
transform: rotateZ(-30deg) scale(1.16, 1);
}
}
<div class="line"></div>
You could also do this with svg using line element and some javascript to move y position left and right line parts. To increase angle gradually you can use setInterval method.
let step = 0;
const left = document.querySelector('.left-line');
const right = document.querySelector('.right-line');
function move(el, prop, size) {
el.setAttribute(prop, +el.getAttribute(prop) + size);
}
setInterval(() => {
if (step <= 40) {
move(left, 'y2', 0.8);
move(right, 'y1', 0.8)
step += 1;
}
}, 30)
<svg xmlns="http://www.w3.org/2000/svg">
<line class="left-line" x1="0" y1="20" x2="40" y2="20" stroke="black" />
<line class="right-line" x1="40" y1="20" x2="80" y2="20" stroke="black" />
</svg>
While the accepted answer works just fine the artist in me can't take the overlapping of the lines in the center due to the scaling. Here's a few alternate options:
Option 1 - clip-path
Using clip-path, animate the mid-points of a rectangle to transform the polygon into a chevron. This works by masking the background color of the element outside of the animated shape.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.line {
display: inline-block;
width: 200px;
height: 50px;
background-color: black;
clip-path: polygon(0 0, 100% 0, 100% 2px, 0 2px);
animation: 2s infinite linear;
}
.line.down {
animation-name: chevron-down;
}
.line.up {
animation-name: chevron-up;
}
#keyframes chevron-down {
from {
clip-path: polygon(0 0, 50% 0, 100% 0, 100% 2px, 50% 2px, 0 2px);
}
to {
clip-path: polygon(0 0, 50% 48px, 100% 0, 100% 2px, 50% 50px, 0 2px);
}
}
#keyframes chevron-up {
from {
clip-path: polygon(0 48px, 50% 48px, 100% 48px, 100% 50px, 50% 50px, 0 50px);
}
to {
clip-path: polygon(0 0, 50% 48px, 100% 0, 100% 2px, 50% 50px, 0 2px);
}
}
<div class="line down"></div>
<div class="line up"></div>
Support for clip-path is spotty, however.
Option 2 - pseudo-elements
If you can't use clip-path or prefer to use pseudo elements, change their placement and origins of transform to come from the center (and not the upper corners):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.line {
position: relative;
width: 200px;
height: 50px;
overflow: hidden;
}
.line::before,
.line::after {
position: absolute;
content: '';
display: block;
bottom: 0;
height: 2px;
width: 50%;
background-color: black;
animation: 2s linear infinite;
}
.line::before {
transform-origin: bottom right;
left: 0;
animation-name: before;
}
.line::after {
transform-origin: bottom left;
right: 0;
animation-name: after;
}
#keyframes before {
to { transform: rotateZ(30deg); }
}
#keyframes after {
to { transform: rotateZ(-30deg); }
}
<div class="line"></div>
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>