I'm just animating a simple text, then, after some time, I want it to disappear, however, a few issues appear:
When it first fades in, you can see that the opacity value isn't respected at all, the text appears almost out of nowhere.
When it fades out, you can see that the movement is weird and the opacity transition runs after the movement.
#container {
width: 960px;
height: 200px;
border: 1px solid black;
position: absolute;
}
#message {
position: relative;
z-index: 2;
color: black;
font-size: 18px;
opacity: 0;
top: 60px;
left: 100px;
transform: translate3d(0, -25px, 0);
animation: showMessage 1.5s ease 1.5s forwards, hideMessage 1.5s ease 4s forwards;
}
#keyframes showMessage {
0% {
opacity: 0;
transform: translate3d(0, -25px, 0);
}
100% {
opacity: 100;
transform: translate3d(0, 0, 0);
}
}
#keyframes hideMessage {
0% {
opacity: 100;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(-25px, 0, 0);
}
}
<div id="container">
<div id="message">
Hey, look at me!
</div>
</div>
What gives? If I remove the second animation, everything comes back to normal.
The property opacity goes from 0 to 1, so the change is happening almost instantly. About the weird movement when leaving, seems fine to me.
#container {
width: 960px;
height: 200px;
border: 1px solid black;
position: absolute;
}
#message {
position: relative;
z-index: 2;
color: black;
font-size: 18px;
opacity: 0;
top: 60px;
left: 100px;
transform: translate3d(0, -25px, 0);
animation: showMessage 1.5s ease 1.5s forwards, hideMessage 1.5s ease 4s forwards;
}
#keyframes showMessage {
0% {
opacity: 0;
transform: translate3d(0, -25px, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
#keyframes hideMessage {
0% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(-25px, 0, 0);
}
}
<div id="container">
<div id="message">
Hey, look at me!
</div>
</div>
Check this code, I hope this will help you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container {
width: 960px;
height: 200px;
border: 1px solid black;
position: absolute;
}
#message {
position: relative;
z-index: 2;
color: black;
font-size: 18px;
opacity: 0;
top: 60px;
left: 100px;
transform: translate3d(0, -25px, 0);
animation-name: showMessage;
animation-duration: 3s;
animation-delay: 500ms;
animation-direction: alternate;
}
#keyframes showMessage {
0% {
opacity: 0;
transform: translate3d(0, -55px, 0);
}
50% {
opacity: 100;
transform: translate3d(0, 0, 0);
}
100%{
opacity: 0;
transform: translate3d(-65px, 0, 0);
}
}
#keyframes hideMessage {
0% {
opacity: 100;
transform: translate3d(0, 0, 0);
}
100% {
opacity: 0;
transform: translate3d(-65px, 0, 0);
}
}
</style>
</head>
<body>
<div id="container">
<div id="message">
Hey, look at me!
</div>
</div>
</body>
</html>
Related
I have 4 cards that lay flat and "stand up" on hover however they also flip as they had a front and a back. I only want one-sided cards and I don't know how to stop them flipping. I have removed the html for the back of the card however I can't seem to stop the card flipping in CSS. What do I need to change in my code to stop them flipping?
.card-holder {
width: 90%;
height: 70%;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: -370em;
text-align: center;
}
div:target .card-face {
animation: flip-2 1s;
animation-fill-mode: forwards;
}
div:target .card-face:before {
animation: shadow-2 1s;
animation-fill-mode: forwards;
}
.card {
display: inline-block;
perspective: 1000px;
position: relative;
margin: 50px;
}
.card:hover .card-face {
animation: flip-2 1s;
animation-fill-mode: forwards;
}
.card:before{
animation: shadow-2 1s;
animation-fill-mode: forwards;
}
.card-face {
display: block;
width: 139px;
height: 250px;
transform-origin: bottom;
animation: flip 1s;
animation-direction: reverse;
animation-fill-mode: forwards;
}
.front-card, .project-img {
width: inherit;
height: inherit;
}
.card:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
transition: all 0.5s;
transform-origin: bottom;
animation: shadow 1s;
animation-direction: normal;
animation-fill-mode: forwards;
}
.card-face {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front-card {
/* backface-visibility: hidden; */
position: absolute;
top: 0;
left: 0;
}
/* .back-card {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 2;
} */
.front-card {
transform: rotateY(180deg);
}
#keyframes flip {
0% {
transform: rotateX(50deg) rotateY(0deg);
}
60% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(0deg) rotateY(180deg);
}
}
#keyframes shadow {
0% {
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateX(0deg) translateZ(-60px) scale(0.85);
opacity: 1;
}
60% {
transform: rotateX(95deg) translateZ(-40px) scaleY(0.15) scaleX(0.65) rotateY(0);
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
opacity: 0.25;
}
100% {
transform: rotateX(95deg) translateZ(-40px) scaleY(0.05) scaleX(0.65) rotateY(0);
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
opacity: 0.25;
}
}
/* #keyframes flip-2 {
0% {
transform: rotateX(50deg) rotateY(0deg);}
60% {
transform: rotateX(0deg); }
100% {
transform: rotateX(0deg) rotateY(180deg);}
} */
#keyframes shadow-2 {
0% {
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateX(0deg) translateZ(-60px) scale(0.85);
opacity: 1;}
60% {
transform: rotateX(95deg) translateZ(-40px) scaleY(0.15) scaleX(0.65) rotateY(0);
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
opacity: 0.25;}
100% {
transform: rotateX(95deg) translateZ(-40px) scaleY(0.05) scaleX(0.65) rotateY(0);
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
opacity: 0.25;}
}
<div class="card-holder" id="all-cards">
<div class="card" id="card-1">
<a href="#card-1" class="card-face">
<div class="front-card">
<img class="project-img" src="https://i.imgur.com/0RUrrQF.jpg" alt="Death">
</div>
</a>
</div>
<div class="card" id="card-2">
<a href="#card-2" class="card-face">
<div class="front-card">
<img class="project-img" src="https://i.imgur.com/ulOYmlT.jpg" alt="Death">
</div>
</a>
</div>
</div>
remove this line line 100% {
transform: rotateX(0deg) rotateY(180deg);
} from ...
#keyframes flip {
0% {
transform: rotateX(50deg) rotateY(0deg);
}
60% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(0deg) rotateY(180deg);
}
}
I have a span element and can not use another. Through this span element I have to achieve spinner/loader functionality and I want behavior looks like given below-
https://codepen.io/supah/pen/BjYLdW
Following is my code which is not working as expected:
<span class="spinner"></span>
.spinner{
display: block;
border-radius: 8em;
width: 8em;
height: 8em;
display: inline-block;
animation: dash 2.0s ease-in-out infinite;
}
#keyframes dash {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Can any one help me where I am lacking?
Not sure what you were doing with spinner--wholePageWithVeil. But, it's not necessary. The bit you were missing was giving the border a width and style.
body {
background-color: #008;
}
.spinner {
animation: spin 1s infinite ease-in-out;
// animation: dash 2s infinite ease-in-out;
border-radius: 50%;
border-top: 2px solid #fff;
display: inline-block;
height: 2em;
margin: calc(50vh - 1em) calc(50vw - 1em);
width: 2em;
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<span class="spinner"></span>
This is to Easy.
You need to modified some css, give stroke: #fff; into spinner class.
Please check and let me know further clarificaion.
Hope this help.
html, body {
height: 100%;
background-image: linear-gradient(-105deg, #009acc, #363795);
}
.spinner {
animation: rotate 2s linear infinite;
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
width: 50px;
height: 50px;
stroke: #fff;
}
.path {
stroke: hsl(210, 70, 75);
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
#keyframes rotate {
100% {
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
<svg class="spinner" viewBox="0 0 50 50">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</svg>
Yes you can also create with pure css like that.
Hope this help.
.lds-ring {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ring span {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #000 transparent transparent transparent;
}
.lds-ring span:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring span:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring span:nth-child(3) {
animation-delay: -0.15s;
}
#keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="lds-ring">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Yes, you need to change animation css like: animation: lds-ring 1.2s cubic-bezier(0.5, 0.5, 0.5, 0.5) infinite;
Hope this help.
span {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0.5, 0.5, 0.5) infinite;
border-color: #000 #000 #000 transparent;
}
#keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<span></span>
The CSS animation commands are working perfectly but you can not see it. you need an image because you are not using <svg> and <circle> as they use in the example you have attached.
Note that the width and height of .spinner class should be the width and height of the spinner image.
Based on your code:
LIVE DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--remove comment to use jquery-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
<style>
.spinner {
vertical-align: middle;
width: 128px;
height: 128px;
display: inline-block;
margin-right: 5px;
border-radius: 2em;
-webkit-box-sizing: border-box;
border-top-color: #fff;
-webkit-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
}
.spinner--wholePageWithVeil{
display: block;
border-radius: 8em;
width: 8em;
height: 8em;
display: inline-block;
animation: dash 2.0s ease-in-out infinite;
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<span class="spinner" [class.spinner--wholePageWithVeil]="wholePageWithVeil">
<img src="http://www.pbrennan.net/wp-content/uploads/2014/03/ic_progress.png" alt="">
</span>
</body>
</html>
Using CSS animation, I am adding a 'wobble' effect to each letter in a word. Each letter is made up of an SVG group <g>. However, as you can see in the example, the effect gets more extreme with each letter, whereas I want a consistent 'wobble' per letter (the same effect on each letter). How can this be acheived?
Note: I have not included the SVG source code, to keep the question tidy. It can be seen in the example if needed.
Thanks.
SCSS
// Logo
.logo {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: 1;
width: 260px;
display: block;
// SVG
svg {
display: block;
width: 100%;
overflow: visible;
g {
fill: transparent;
transition: all 300ms ease-in-out;
#keyframes wobble {
0% { transform: rotate(0) translate3d(0, 0, 0) }
25% { transform: rotate(2deg) translate3d(1px, 0, 0) }
50% { transform: rotate(-1deg) translate3d(0, -1px, 0) }
75% { transform: rotate(1deg) translate3d(-1px, 0, 0) }
100% { transform: rotate(-2deg) translate3d(-1px, -1px, 0) }
}
animation-duration: 400ms;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-name: wobble;
animation-timing-function: ease-in-out;
path {
fill: red;
}
}
}
}
Example
I could not figure out how to do it with SVGs - I did manage to come up with something similar to your requirement.
Part of the solution involved using a center point for the rotation:
transform-origin: center;
See demo below
#my-logo div {
display: inline-block;
color: red;
font-size: 60px;
font-family: arial;
font-weight: bolder;
text-transform: uppercase;
fill: transparent;
transition: all 300ms ease-in-out;
transform-origin: center;
animation-duration: 400ms;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-name: wobble;
animation-timing-function: ease-in-out;
}
#keyframes wobble {
0% {
transform: rotate(0) translate3d(0, 0, 0);
}
25% {
transform: rotate(2deg) translate3d(1px, 0, 0);
}
50% {
transform: rotate(-1deg) translate3d(0, -1px, 0);
}
75% {
transform: rotate(1deg) translate3d(-1px, 0, 0);
}
100% {
transform: rotate(-2deg) translate3d(-1px, -1px, 0);
}
}
<div id="my-logo">
<div>o</div>
<div>u</div>
<div>t</div>
<div>r</div>
<div>a</div>
<div>g</div>
<div>e</div>
<div>
<!-- also works with images -->
<img src="http://placekitten.com/100/100" />
</div>
</div>
So I have a menu that is revealed using a clip path, and then inside that the links animate from 0 - 1 opacity. This worked for a while, until chrome 66. This still works in Firefox, so I'm not sure if this is a bug in chrome or the way it's supposed to be and Firefox hasn't caught up.
#keyframes slideInDown {
from {
-webkit-transform: translate3d(0, -50%, 0);
transform: translate3d(0, -50%, 0);
opacity: 0;
}
to {
-webkit-transform: translate3d(0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.mobile-menu {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
background: #f1f200;
padding: 24px;
display: none;
transition: 500ms ease-out;
}
.mobile-menu {
clip-path: circle(0 at 0% 0%);
display: block;
}
.mobile-menu.active {
display: block;
clip-path: circle(200% at 0% 0%);
}
.mobile-menu.active a {
animation-name: slideInDown;
animation-duration: 0.9s;
animation-fill-mode: forwards;
animation-delay: 160ms;
}
.mobile-menu a {
color: #ff005d;
animation-name: none;
display: block;
opacity: 0;
}
https://codepen.io/picard102/pen/zjoexP
So how would I go at replicating the effect in chrome now?
This is bug https://bugs.chromium.org/p/chromium/issues/detail?id=823362
It works fine in Chrome 67 and 68.
I implement a form with AngularJS (for adding a contact).
This form contains several fields.
The first field is a text for the LastName. When a text is entered the system checks in the database if the value already exists. If the value exists the system displays an error message with the different contacts with the same lastName:
I created a popover in order displays contact details with the event mouseover. I have problem for displaying the popover in the page.
The popover should be displayed in front of the next fields. But I don't know how to do that (even with the relative position).
Here my HTML code:
<div ng-show="ContactForm.username.$dirty && alreadyExist=='true' " class="alert alert-info" role="alert" style="margin-top:10px; position:relative">
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Last Name already exists:
<ul id="contacts_list">
<li ng-repeat=" cont in contacts" style="position:relative">
<div angular-popover direction="right" template-url="template/popover.html" mode="mouseover">
{{ cont.lastname }} {{ cont.firsttname }}
</div>
</li>
</ul>
</div>
And the CSS:
.angular-popover-container {
position: absolute;
width: 0;
height: 0;
left: 0
}
.angular-popover {
position: absolute;
box-shadow: 0 0 7px 1px rgba(0, 0, 0, .2);
background-color: #fff
}
.angular-popover-template {
padding: 10px;
}
.popover-floating-animation-top {
animation: floatingtop 3s .5s infinite;
-webkit-animation: floatingtop 3s .5s infinite
}
.popover-floating-animation-bottom {
animation: floatingbottom 3s .5s infinite;
-webkit-animation: floatingbottom 3s .5s infinite
}
.popover-floating-animation-left {
animation: floatingleft 3s .5s infinite;
-webkit-animation: floatingleft 3s .5s infinite
}
.popover-floating-animation-right {
animation: floatingright 3s .5s infinite;
-webkit-animation: floatingright 3s .5s infinite
}
#-webkit-keyframes floatingtop {
from,
to {
transform: translate(0, 0);
-webkit-transform: translate(0, 0)
}
60% {
transform: translate(0, -8px);
-webkit-transform: translate(0, -8px)
}
}
#-webkit-keyframes floatingbottom {
from,
to {
transform: translate(0, 0);
-webkit-transform: translate(0, 0)
}
60% {
transform: translate(0, 8px);
-webkit-transform: translate(0, 8px)
}
}
#-webkit-keyframes floatingright {
from,
to {
transform: translate(0, 0);
-webkit-transform: translate(0, 0)
}
60% {
transform: translate(8px, 0);
-webkit-transform: translate(8px, 0)
}
}
#-webkit-keyframes floatingleft {
from,
to {
transform: translate(0, 0);
-webkit-transform: translate(0, 0)
}
60% {
transform: translate(-8px, 0);
-webkit-transform: translate(-8px, 0)
}
}
.hide-popover-element {
display: none
}
.angular-popover-triangle {
width: 30px;
height: 30px;
position: relative;
overflow: hidden;
box-shadow: 0 6px 10px -17px rgba(0, 0, 0, .2)
}
.angular-popover-triangle:after {
content: "";
position: absolute;
width: 15px;
height: 15px;
background: #fff;
transform: rotate(45deg);
box-shadow: 0 0 7px 1px rgba(0, 0, 0, .2)
}
.angular-popover-triangle-top:after {
top: -8.5px;
left: 7px
}
.angular-popover-triangle-bottom:after {
top: 23.5px;
left: 7px
}
.angular-popover-triangle-right::after {
top: 7.5px;
left: 23.5px
}
.angular-popover-triangle-left::after {
top: 7.5px;
left: -8.5px
}
ul#contacts_list {
width: 200px;
margin-top:20px;
}
ul#contacts_list li {
width: 200px;
list-style-type: none;
padding: 6px 10px;
}
li:hover {
background: #EEE;
}
Could you please help me to solve that?
Regards
The problem was due to the parameter z-index not correctly defined. All is ok now.