I'm working on creating a Slider image, using animation and transition at once. the animation property translates a div(.slider__images) to the left almost every 6.5 sec and the transition property works when the user clicks the small rounded button to translate the Slider to the left with a specific value. But the problem is I can't use both of them it's simply does not work, I need to comment one of them to make the animation or the buttons work. You can have a look at the code on codepen: https://codepen.io/Youssri/pen/GbajOQ?editors=1100
NOTE: the animation is on comment, try to uncomment it... it won't work!
This is the keyframe animation:
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
40% {
left: -100vw;
}
60%{
left: -100vw;
}
80%{
left: -200vw;
}
100% {
left: -200vw;
}
}
This the buttons css
#first-image:target ~ .slider__images {
left: 0;
}
#second-image:target ~ .slider__images {
left: -100vw;
}
#third-image:target ~ .slider__images {
left: -200vw;
}
the div to slide
.slider__images {
width: 300vw;
height: 90vh;
margin: 0;
font-size: 0;
position: relative;
transition: left 2s;
/*animation: slider 20s infinite alternate;*/
}
Related
I'm trying to make a div that appear and disappear on touch, like the navigation bar of android phones.
Should I use transition for this or is animation ok? In the fiddle example i use the mouse click and the setTimeout to simulate the touches and the auto disappear if you dont touch the screen for some seconds.
.custom-row{
position: fixed;
width: 100%;
height: 50px;
bottom: -100px;
left: 0px;
background-color: yellow;
opacity: 0;
}
.slidein {
animation: slidein 1s ease-in forwards;
}
.slideout {
animation: slideout 1s ease-in forwards;
}
#keyframes slidein {
0% {
}
100% {
bottom: 0px;
opacity: 1;
}
}
#keyframes slideout {
0% {
bottom: 0px;
opacity: 1;
}
100% {
bottom: -100px;
opacity: 0;
}
}
https://jsfiddle.net/1rm64q8z/1/
For this use case, transition seems to be a better solution. With animation, alerting position is a compute-intensive approach. The CSS will also be much more readable and scalable with transitions in this case.
const bar = document.getElementById("bottom-bar");
bar.addEventListener("click", (el) => {
el.target.classList.toggle("slide-out");
setTimeout(() => {
el.target.classList.toggle("slide-out");
el.target.classList.toggle("slide-in");
}, 2000)
})
body {
overflow: hidden;
}
#bottom-bar {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
background: yellow;
padding: 16px;
text-align: center;
transform-origin: bottom;
transition: transform 0.4s ease-in-out;
}
.slide-in {
transform: translateY(0%);
}
.slide-out {
transform: translateY(100%);
}
<div id="bottom-bar">
Hello
</div>
The performance of CSS transitions and animations should be almost the same as they are both hardware accelerated so on most modern browsers the behaviour should be the same.
Animations are often used to create a more complex series of movements and they do not lift the rendering process to the GPU and resulting in being slower than transitions.
This article gives a great breakdown of when to use animations vs transitions.
This is my first time asking a question on here and I've found questions that are somewhat similar, but haven't worked for my issue.
I am trying to spin a word across the screen from off-screen left to off-screen right. The center of the word should be it's rotation point (ie word spins in place from left side of screen to right). I have tried using variations of translateX and rotate, but it either rotates in place or moves left to right. When it does move from the left to right off the screen, it keeps extending the bounds of my screen and stretching it before it loops back to the left side. Any ideas how I can solve this? Seems simple, but I'm terrible with animations.
.move {
position: absolute;
animation: moveword 10s infinite linear;
}
.spin {
position: absolute;
animation: spin 7s infinite linear;
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#keyframes moveword {
from {
left: -10%;
}
to {
left: 95%;
}
}
Based on code that you provide, I assume you could make something like this.
overflow: hidden needs to be applied to separate element, not the <body> because it restricts scrolling.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.page {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.word {
position: absolute;
top: 5px;
left: 5px;
animation: word-anim 10s infinite linear;
}
#keyframes word-anim {
0% {
transform: translateX(0px) rotateZ(0deg);
}
70% {
transform: translateX(70vw) rotateZ(360deg);
}
100% {
transform: translateX(100vw) rotateZ(360deg);
}
}
<div class="page">
<span class="word">A word</span>
</div>
Using the second answer found here. I combined my images into a sprite and then updated my CSS to reflect the keyframes element like in the example provided. The sprite image (castle) shows up but the slide effect does not take place? What am I missing?
Sample URL, center element on home page: http://216.157.26.175/cookiedouglas/
Here is my CSS:
.agentpress-pro-cookie .home-featured .widget {
/* background-color: rgba(255, 255, 255, 0.8); */
background: url("http://216.157.26.175/cookiedouglas/wp-content/uploads/sites/58/2015/05/fort-myers-homes-for-sale.jpg");
opacity: 0.95;
content: '';
/* position: absolute;
width: 400%;
height: 100%; */
z-index: -1;
/* background: url(http://placekitten.com/500/500/); Image is 500px by 500px, but only 200px by 50px is showing. */
animation: slide 3s infinite;
}
#keyframes slide {
20% {
left: 0;
}
40%, 60% {
left: -50%;
}
80%, 100% {
left: -100%;
}
}
Use browser (vendor) specific prefixes.
Browser prefixes are used to add new features that may not be part of a formal specification and to implement features in a specification that hasn’t been finalized.
CSS3 animation is one of those features. It has partial support across different browsers. Browser support for CSS3 animations can be checked here.
As evident from the above link, to make the animation work on browsers other than IE and Firefox, you meed the -webkit- prefix.
Also, CSS left propery works only with absolutely positioned elements.
So you should try something like this (read added comments in snippet for explanation):
/*visible portion of the larger 5120x680 pixel image*/
.widget {
width: 1024px;
height: 680px;
position: relative;
overflow: hidden;
border: 1px solid black;
}
.widget:before {
content: '';
position: absolute;
/*needed for CSS left property to work*/
width: 5120px;
height: 680px;
z-index: -1;
/*ExampleImageSprite.jpg is a 5120x680 pixel image which is a combination of 5 individual 1024x680 pixel images*/
background: url("https://dl.dropboxusercontent.com/u/192824325/00_sandbox/30150865/ExampleImageSprite.jpg");
-webkit-animation: slide 10s infinite;
animation: slide 10s infinite;
}
#-webkit-keyframes slide {
0% {
left: 0px;
}
20% {
left: -1024px;
}
40% {
left: -2048px;
}
60% {
left: -3072px;
}
80% {
left: -4096px;
}
100% {
left: -5120px;
}
}
#keyframes slide {
0% {
left: 0px;
}
20% {
left: -1024px;
}
40% {
left: -2048px;
}
60% {
left: -3072px;
}
80% {
left: -4096px;
}
100% {
left: -5120px;
}
}
<div class=widget></div>
I have an image that is absolutely positioned using vh units. I want to animate this positioning use CSS. When doing so, however, the relative nature of vh units seems to be lost. To illustrate, look at the following two examples. In both of them, drag the bottom of your browser up and down to change its height.
No animation
The positioning adjusts correctly in relation to the screen height.
http://codepen.io/maxedison/pen/jPOQPW
#mountain {
position: absolute;
left: 50%;
top: 55vh;
opacity: 1;
}
img {
width: 180vh;
margin-left: -50%;
}
<div id="screen1">
<div id="mountain">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/20/Red_Slate_Mountain_1.jpg">
</div>
</div>
Animation
The positioning does NOT adjust at all. It's like the vh unites have turned into static px, maintaining the same distance from the top of the window regardless of screen height.
http://codepen.io/maxedison/pen/QbWJbj
#mountain {
position: absolute;
left: 50%;
top: 100vh;
opacity: 0;
-webkit-animation: lincoln_page_load 2s ease forwards;
animation: lincoln_page_load 2s ease forwards;
}
img {
width: 180vh;
margin-left: -50%;
}
#-webkit-keyframes lincoln_page_load {
to {
opacity: 1;
top: 55vh
}
}
#keyframes lincoln_page_load {
to {
opacity: 1;
top: 55vh
}
}
<div id="screen1">
<div id="mountain">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/20/Red_Slate_Mountain_1.jpg">
</div>
</div>
Any ideas on how to correct this? I know I can resort to JavaScript to make this work :)
This is only a problem when the animation is paused with forwards and the animation is still active:
Place the top: 55vh in #mountain so that when the animation ends it has this value and remove the opacity: 0
Remove forwards so that the animation is completed
Add the opacity: 0 and top: 100vh to from in the keyframes so that these values are present when the page loads
This has the added benefit of showing the image if the browser does not support the animation property.
Codepen Example with SASS (Auto-prefixer is turned on)
Using a transform for animation
Here is another example using a transform — translate (info link) — which seems to provide a slightly smoother animation.
Working Example — vanilla CSS
#mountain {
position: absolute;
left: 50%;
top: 55vh;
-webkit-animation: lincoln_page_load 2s ease;
animation: lincoln_page_load 2s ease;
}
img {
width: 180vh;
margin-left: -50%;
}
#-webkit-keyframes lincoln_page_load {
from {
top: 100vh;
opacity: 0;
}
to {
opacity: 1;
top: 55vh
}
}
#keyframes lincoln_page_load {
from {
top: 100vh;
opacity: 0;
}
to {
opacity: 1;
top: 55vh
}
}
<div id="screen1">
<div id="mountain">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/20/Red_Slate_Mountain_1.jpg">
</div>
</div>
I have to elements and I want to animate them seperatly. Element one should play animation one and element two should play animation two.
But when I test it element one plays both animations and element two none.
This is not happening if I start the animation of element two with a delay, but this is no solution...
Here's element one:
#wrapper_splashscreen #logo {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
-webkit-animation: logoIntro 0.5s 1; }
#-webkit-keyframes logoIntro
{
0% {
-webkit-transform: scale(0, 0);
opacity: 0;
}
80% {
-webkit-transform: scale(1.4, 1.4);
}
90% {
-webkit-transform: scale(1.1, 1.1);
}
100% {
-webkit-transform: scale(1, 1);
opacity: 1;
}
}
and here's element two:
#wrapper_splashscreen #menu {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
background: #151515;
-webkit-animation-name: menuIntro 1s 1; }
#-webkit-keyframes menuIntro
{
0%, 30% {
bottom: -40px;
}
100% {
bottom: 0px;
}
}
The logo (element one) is fadeing in and moving down and the menu (element two) is doing nothing.
In the second element you've an error:
-webkit-animation-name: menuIntro 1s 1;
It should be -webkit-animation.
I'm not sure what's the problem with the first element (please add a fiddle/demo), buy maybe setting a transform-origin will help
It seems like the animation becomes buggy when you navigate to the animated element with an anchor. The browser navigates to the element while its moving and the animation gets broken.