I want to move the block to the left along its length.
How I can do this?
simple example, pure css :
.mytext {
border: 8px black solid;
text-align: center;
font-size: 45px;
left: 300px;
width: inherit;
height: 60px;
transition: 2s;
-webkit-transition: 2s;
-moz-transition: 2s;
position: absolute;
}
.mytext:hover {
left: 0;
}
.mytext2 {
margin-top: 100px;
border: 8px black solid;
text-align: center;
font-size: 45px;
width: 300px;
height: 60px;
transition: 2s;
-webkit-transition: 2s;
-moz-transition: 2s;
position: absolute;
}
#keyframes slideToLeft {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
.mytext2 {
/* This section calls the slideInFromLeft animation we defined above */
animation: 2s ease-out 0s 1 slideToLeft;
}
<div class="mytext">text</div>
<div class="mytext2">text2</div>
Related
#keyframes rightup {
0% {
transform-origin: top left;
}
5%,
30% {
transition: transform 1s ease-out;
transform-origin: top left;
transform: rotate(-20deg);
}
10%,
35% {
transition: transform 1s ease-in;
transform: translateY(-20px);
}
15%,
40% {
transition: transform 1s ease-out;
transform-origin: top right;
transform: rotate(20deg);
}
20%,
45% {
transition: transform 1s ease-in;
transform: translateY(-20px);
}
25%,
50% {
transform-origin: 0 0;
transform: translateY(0px);
}
}
body {
background-color: #82AAE3;
/*#91D8E4*/
}
.box {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 110px;
}
.giftbox {
position: absolute;
left: 5%;
height: 100px;
width: 100px;
border-radius: 5px;
background-color: #DC3535;
}
.lid {
position: absolute;
height: 20px;
width: 110px;
background-color: #DC3535;
border-style: solid;
border-color: black;
border-width: 0.1px;
border-radius: 5px;
animation-name: rightup;
animation-duration: 1s;
animation-iteration-count: 3;
animation-delay: 1s;
}
.ribbon-h {
position: absolute;
height: 20px;
width: 100px;
top: 40%;
left:0;
background-color: #FFE15D;
}
.ribbon-v {
position: absolute;
height: 100px;
width: 20px;
left: 40%;
top:0;
background-color: #FFE15D;
}
.box:hover {
transition: transform 400ms ease-in-out;
transform: scale(1.3);
}
.box:hover .lid {
animation:none;
transition: transform 400ms ease-in-out;
transform-origin: top left;
transform: rotate(-120deg);
}
<div class="box">
<div class="giftbox">
<div class="textmsg"><p></p></div>
<div class="ribbon-h">
</div>
<div class="ribbon-v">
</div>
</div>
<div class="lid"></div>
</div>
When hovered over while the animation is running , the transition mentioned in hover state executes instantly.
While when hovered over after the animation is done , the transition mentioned in hover state executes according to the duration specified.
tried adding play-state:paused too , but that made it even weirder.
I am using a vertical bar chart from the site::
https://codepen.io/anythinggraphic/pen/xxKpBax
/* Bar Graph Vertical */
.bar-graph .year {
-webkit-animation: fade-in-text 2.2s 0.1s forwards;
-moz-animation: fade-in-text 2.2s 0.1s forwards;
animation: fade-in-text 2.2s 0.1s forwards;
}
.bar-graph-vertical {
margin-top: -109px;
max-width: 680px;
}
.bar-graph-vertical .bar-container {
float: left;
height: 150px;
margin-right: 8px;
position: relative;
text-align: center;
width: 40px;
}
.bar-graph-vertical .bar {
border-radius: 3px;
bottom: 40px;
position: absolute;
width: 40px;
}
.bar-graph-vertical .year {
bottom: 0;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.bar-graph-two .bar::after {
-webkit-animation: fade-in-text 2.2s 0.1s forwards;
-moz-animation: fade-in-text 2.2s 0.1s forwards;
animation: fade-in-text 2.2s 0.1s forwards;
color: #fff;
content: attr(data-percentage);
font-weight: 700;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
text-align: left;
top: 24px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.bar-graph-two .bar-one .bar {
background-color: #64b2d1;
-webkit-animation: show-bar-one-vertical 1.2s 0.1s forwards;
-moz-animation: show-bar-one-vertical 1.2s 0.1s forwards;
animation: show-bar-one-vertical 1.2s 0.1s forwards;
}
.bar-graph-two .bar-two .bar {
background-color: #5292ac;
-webkit-animation: show-bar-two-vertical 1.2s 0.2s forwards;
-moz-animation: show-bar-two-vertical 1.2s 0.2s forwards;
animation: show-bar-two-vertical 1.2s 0.2s forwards;
}
.bar-graph-two .bar-three .bar {
background-color: #407286;
-webkit-animation: show-bar-three-vertical 1.2s 0.3s forwards;
-moz-animation: show-bar-three-vertical 1.2s 0.3s forwards;
animation: show-bar-three-vertical 1.2s 0.3s forwards;
}
.bar-graph-two .bar-four .bar {
background-color: #2e515f;
-webkit-animation: show-bar-four-vertical 1.2s 0.4s forwards;
-moz-animation: show-bar-four-vertical 1.2s 0.4s forwards;
animation: show-bar-four-vertical 1.2s 0.4s forwards;
}
I have posted the CSS code block from the site but please refer to the site.
I have to increase the height of a particular bar labelled "2017". I am unable to do that. I tried with inspect element but can't do it. Please can any one help me with this. Thank You!!!
there are two ways:
1)inline css on line 109
100% {
height: 108%;
}
or
2)
<div class="bar" data-percentage="68%" style="height: 120% !important;"></div>
if you use and fill data-percentage on your server side, you could also fill a css var() value meanwhile and use that var to update size and label from CSS.
Writing-mode is also an option to rotate your text.
example
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
--bar: clamp(220px, 40vh, 500px);/* whatever you need here */
min-height:100vh;/*demo purpose */
display:flex;/*demo purpose */
}
body{margin:auto;/*demo purpose */}
ul {
font-size:clamp(10px, 4vmin, 16px);/* whatever you need here */
height: var(--bar);
display: flex;
align-items: end;
padding-top:0.5em;
padding-bottom: 4em;
width:max-content;/*demo purpose */
margin:auto;/*demo purpose */
background:#bee;
border-radius:0.25em;
box-shadow:0 0 5px;/*demo purpose */
transition: 0.2s
}
ul:hover {transform:rotate(-90deg);/*demo purpose */}
li {
width:2em;
writing-mode: vertical-lr;
margin: 0 0.5em;
display: flex;
align-items: center;
animation: show-bar-vertical 1.2s 0.4s forwards;
}
b {
margin-bottom: -4em;
padding:0.5em;
background:#adf
}
span {
padding: 0 0.5em;
flex: 1 1;
border-radius: 0.25em;
margin-bottom: 0.25em;
overflow:hidden;
max-height:0;
box-shadow:1px 1px 2px white,-1px -1px 2px gray;
animation:delay 0.1s 0.25s forwards
}
span:before {
content: attr(data-percentage);
display: inline-block;
color: white;
text-indent: .5em;
height:0;
}
li:nth-child(odd) b {background:#aef;}
li:nth-child(1) span {
background-color: #64b2d1;
}
li:nth-child(2) span {
background-color: #5292ac;
}
li:nth-child(3) span {
background-color: #407286;
}
li:nth-child(4) span {
background-color: #2e515f;
}
li:nth-child(5) span {
background-color: #1e3d49;
}
#keyframes show-bar-vertical {
0% {
height: 0;
}
100% {
height: var(--data-percentage,auto);
}
}
#keyframes delay{
to {max-height:100%;}
}
<!-- example build from a list, structure can be anything else -->
<ul id="bargraph">
<li style="--data-percentage : 40% ">
<span data-percentage=" 40%" ></span>
<b>2020</b>
</li>
<li style="--data-percentage : 55% ">
<span data-percentage=" 55%" ></span>
<b>2019</b>
</li>
<li style="--data-percentage : 100% " >
<span data-percentage=" 100%" ></span>
<b>2018</b>
</li>
<li style="--data-percentage : 82% ">
<span data-percentage=" 82%" ></span>
<b>2017</b>
</li>
<li style="--data-percentage : 25% ">
<span data-percentage=" 25%" ></span>
<b>2016</b>
</li>
</ul>
I want a picture to slide (with keyframes), and wen :hover that its scale grows, and when :active, decrease its scale. When i do so, it only slides, :hover and :active don´t work... Please help
#slide-right {
margin-left: 25px;
margin-right: 25px;
margin-bottom: 25px;
height: 250px;
box-shadow: 0px 1px 5px grey;
border-radius: 10px;
transition: .5s;
animation: slide-right 1s ease-out both;
}
#slide-right:hover {
transition: .5s;
transform: scale(1.04);
}
#slide-right:active {
transition: .2s;
transform: scale(0.95);
}
#keyframes slide-right {
0% {
transform: translateX(0);
}
100% {
transform: translateX(+200px);
}
}
<img src="https://www.w3schools.com/w3css/img_lights.jpg" id="slide-right">
#slide-right {
position: relative;
margin-left: 25px;
margin-right: 25px;
margin-bottom: 25px;
height: 250px;
box-shadow: 0px 1px 5px grey;
border-radius: 10px;
transition: .5s;
animation: slide-right 1s ease-out forwards;
}
#keyframes slide-right{
0% {
left: 0px;
}
100% {
left: 200px;
}
}
#slide-right:hover {
transition: .5s;
transform: scale(1.04);
}
#slide-right:active {
transition: .2s;
transform: scale(0.95);
}
<img src="https://www.w3schools.com/w3css/img_lights.jpg" id="slide-right">
It is happening because your key-frames animation is using css transform property and css for hover also uses transform to scale the image. So, only one of it will work at a time.
As a workaround for this problem, you can animate the entry of image using position.
Add position:relative to #slide-right and update your key-frames to 0%{left:0} and 100%{left:200px}.
For working example, please refer : this
I want when the component is open to make an animation or to make a fade.
This is the code
This is the HTML
<div *ngIf="showMePartially" class="container">
<div class="body-container">
</div>
</div>
This is the CSS
.container {
position: fixed;
z-index: 1;
padding-top: 100px;
transition: opacity 0.5s ease-in;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
transition: 3s;
}
.body-container {
width: calc(100% - 73em);
position: relative;
left: 70em;
top: 7.5em;
background: white;
height: calc(100% - 18em);
border-radius: 4px;
padding-left: 11px;
transition: opacity 0.5s ease-in;
animation-direction: normal;
}
You can use css animation:
.body-container {
/* above styles */
animation: animation-name .3s ease-out forwards;
}
#keyframes animation-name {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
You can make your own animation inside of keyframes. This should work, because *ngIf will either remove element from dom, if condition is false, or append it into dom(this is when animation should work).
EDIT
For left to right animation you can do like:
#keyframes animation-name {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}
I have created animation that runs hover the link.
I have created animation using in and out key frames.
But I got issue. I think this happens because of knight-rider-out animation. But I need that for mouse leave.
The issue is when the page load it is running automatically. Code pen link
.container {
padding: 50px;
max-width: 500px;
}
.dashBottom {
padding-left: 0px;
position: relative;
padding-bottom: 15px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
color: black;
text-decoration: none;
}
.dashBottom:after {
position: absolute;
content: "";
bottom: 0px;
width: 30px;
background-color: black;
height: 4px;
left: 0;
right: auto;
-webkit-animation: knight-rider-out 0.5s;
animation: knight-rider-out 0.5s;
animation-fill-mode: forwards;
}
.dashBottom:hover:after {
-webkit-animation: knight-rider-in 0.5s;
animation: knight-rider-in 0.5s;
animation-fill-mode: forwards;
}
#keyframes knight-rider-in {
from {
left: 0px;
width: 30px;
}
50% {
left: 0px;
width: 100%;
}
to {
left: calc( 100% - 30px);
width: 30px;
}
}
#keyframes knight-rider-out {
from {
left: calc( 100% - 30px);
width: 30px;
}
50% {
left: 0px;
width: 100%;
}
to {
left: 0px;
width: 30px;
}
}
<div class="container">
<a class="viewMore dashBottom" href="#">View More</a>
</div>
To avoid this you can consider transition. Here is another way to achieve the same effect with less of code:
.container {
padding: 50px;
max-width: 500px;
}
.dashBottom {
padding-left: 0px;
position: relative;
padding-bottom: 15px;
transition: all 0.3s;
color: black;
text-decoration: none;
background-image:linear-gradient(#000,#000);
background-size: 200% 4px;
background-position: calc(200% + 30px) 100%;
background-repeat:no-repeat;
transition:0.5s all;
}
.dashBottom:hover {
background-position:calc(-100% - 30px) 100%;
}
<div class="container">
<a class="viewMore dashBottom" href="#">View More</a>
</div>