Here are some issues which I can't seem to figure out.
When you hover on the image I am animating a few styles but as you will see, when the border size increases, everything else moves with it.
When you change the sidetext to something longer or shorter, it decides to move positions.
Please can someone explain what I am doing wrong?
/*
Colors:
#FF0F00 = red
#FFFF04 = yellow
#387F23 = green
*/
* {
box-sizing: border-box;
}
body {
margin: 0;
background-color: yellow;
font-family: Arial, Helvetica, sans-serif;
}
.animate {
animation-fill-mode: forwards;
animation-duration: 1s;
}
.one {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.two {
-webkit-animation-delay: 1.7s;
-moz-animation-delay: 1.7s;
animation-delay: 1.7s;
}
.three {
-webkit-animation-delay: 2.3s;
-moz-animation-delay: 2.3s;
animation-delay: 2.3s;
}
.four {
-webkit-animation-delay: 3.3s;
-moz-animation-delay: 3.3s;
animation-delay: 3.3s;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
#keyframes fadeInDown {
from {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
#keyframes fadeInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
/* FADE IN RIGHT */
#-webkit-keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
#keyframes fadeInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
.container {
margin-left: auto;
margin-right: auto;
width: 100%;
}
.hero__img img {
max-width: 100%;
vertical-align: middle;
}
.hero__center:after {
position: absolute;
content: " ";
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: red;
/* z-index: -1; */
opacity: 0;
transition: opacity 0.4s ease-in;
}
#media (min-width: 920px) {
.hero {
margin: 0 auto;
width: 700px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
.hero__heading {
position: absolute;
font-size: 80px;
color: #0004f3;
text-transform: uppercase;
font-weight: bold;
font-kerning: -3px;
letter-spacing: 4px;
z-index: 1;
}
.hero__heading--top {
left: -85px;
top: -150px;
opacity: 1;
}
.hero__heading--bottom {
right: -85px;
bottom: -150px;
opacity: 1;
}
.hero__center {
position: relative;
border: 5px solid blue;
transition: border 0.4s ease-in;
}
.hero__center:hover {
border: 10px solid #387F23;
transition: border 0.4s ease-in;
}
.hero__center:hover:after {
opacity: 0.4;
transition: opacity 0.4s ease-in;
}
.hero__center:hover .hero__sideText {
color: red;
transition: color 0.4s ease-in;
}
.hero__img img {
opacity: 1;
transition: opacity 0.4s ease-in;
}
/* .hero__img:hover img {
opacity: 0.4;
transition: opacity 0.4s ease-in;
} */
/* .hero__center:hover {
border: 5px solid green;
transition: border 0.5s;
} */
.hero__sideText {
position: absolute;
top: 50%;
color: #0004f3;
transition: color 0.4s ease-in;
}
.hero__side--left {
left: -50px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
transform-origin: center center;
}
.hero__side--right {
right: -50px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
transform-origin: center center;
}
}
<div class="container">
<div class="hero animate fadeIn one">
<div class="hero__center">
<span class="hero__heading hero__heading--top animate fadeInLeft one">Lorem</span>
<span class="hero__heading hero__heading--bottom animate fadeInRight one">Ipsum</span>
<div class="hero__img">
<img src="http://via.placeholder.com/980x550" alt="">
</div>
<span class="hero__sideText hero__side--left">Side text</span>
<span class="hero__sideText hero__side--right">Side text</span>
</div>
</div>
</div>
Since the size of your box changes by changing the border width, the elements change their position aswell.
try adding :
.hero__center:hover {
margin:-5px;
}
to work against the border change.
2.
The transform rotation uses the center point of your element as its origin (transform-origin: center center;). When increasing the characters you increase the width so the point which the rotation choses as its origin shifts aswell.
To change that you have to fix that point to a specific location. Try adding a div wrappers around your sideText spans with the following css:
.wrapper-left {
position:relative;
left: -50%;
}
.wrapper-right {
position:relative;
left: 50%;
}
I need a slider which would move slides in a vertical direction. The issue with my code is that transition between slides are too slow. Each slide should stay at least 5 sec and transition between next slide should be very quick like we see at the slick slider and so.
#slideshow {
position: relative;
width: 200px;
height: 20px;
border: 5px solid #fff;
overflow: hidden;
}
#slideshow li {
left: 0px;
height:20px;
top: 0;
animation: slide 17s infinite;
}
#slideshow li:nth-child(2) {
animation-delay: 6.25s;
opacity: 0;
}
#slideshow li:nth-child(3) {
animation-delay: 11.5s;
opacity: 0;
}
#keyframes slide {
0% {
transform: translateY(10px);
opacity: 1;
}
25% {
transform: translateY(0px);
opacity: 1;
}
50% {
transform: translateY(-20px);
opacity: 1;
}
50.1%,
100% {
transform: translateY(20px);
opacity: 0;
}
}
<ul id="slideshow">
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
</ul>
JSFiddle
You need to adjust the values of
#slideshow li {
left: 0px;
height:20px;
top: 0;
animation: slide 3s infinite; /*adjust here*/
}
#slideshow li:nth-child(2) {
animation-delay: 1.25s; /*Adjust here*/
opacity: 0;
}
#slideshow li:nth-child(3) {
animation-delay: 1.5s;/*Adjust here*/
opacity: 0;
}
https://jsfiddle.net/Ljhdeb0c/6/
By changing percentage of animation keyframe I have done it. This is what I was looking for.
#slideshow {
position: relative;
width: 200px;
height: 20px;
border: 5px solid #fff;
overflow: hidden;
}
#slideshow li {
position: absolute;
left: 0px;
height:20px;
top: 0;
animation: slide 10s infinite;
}
#slideshow li:nth-child(2) {
animation-delay: 5s;
opacity: 0;
}
#keyframes slide {
0% {
transform: translateY(20px);
opacity: 1;
}
5%, 50%{
transform: translateY(0);
opacity: 1;
}
51% {
transform: translateY(-20px);
opacity: 0;
}
51.1%,
100% {
transform: translateY(20px);
opacity: 0;
}
}
<ul id="slideshow">
<li>slide1</li>
<li>slide2</li>
</ul>
fiddle
I have integrated the wow.js for my project and i have encountered a problem with animation.
The animation class which i used to animate the div is working only if i paste the css class from animate.css into my page as embedded style sheet and also the div is showing even if i give a delay in data-wow-delay="5s"and animation works properly after 5 sec. Plz help me if anyone knows why this is happening.
Here is my code..
HTML :
<div class="cssAnimation hidediv">
<div class="dial1 wow slideInLeft " data-wow-duration="2s" data-wow-delay="5s">
Anmation goes here 1
</div>
</div>
CSS :
<style type="text/css">
.dial1{
width:200px;
height: 100px;
display: block;
position: absolute;
background: #000;
color:#fff;
padding: 10px;
right: 0;
z-index: 9999;
}
.dial2{
width:200px;
height: 100px;
display: block;
position: absolute;
background: #000;
color:#fff;
padding: 10px;
right: 210px;
}
.hidediv{
-webkit-animation: hide 2s forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 5s;
animation: hide 2s forwards;
animation-iteration-count: 1;
animation-delay: 5s;
}
#-webkit-keyframes hide {
0% {
opacity: 1;
}
100% {
opacity: 0;
visibility:hidden;
display: none;
}
}
#keyframes hide {
0% {
opacity: 1;
}
100% {
opacity: 0;
visibility:hidden;
display: none;
}
}
.cssAnimation{
width:600px;
height: 300px;
position: absolute;
/* display: none; */
z-index: 9999;
}
#-webkit-keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes slideInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-2000px);
-ms-transform: translateX(-2000px);
transform: translateX(-2000px);
}
100% {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
</style>
Your css needs to include the .animated class from animate.css, as that's what will be added by Wow.js (unless you specify another selector) when the element is in view, triggering your animations.
Fairly new web developer here. So I have a CSS3 transition on my wordpress site which works fine in every browser but IE and Edge. Not sure exactly what to do about it also since I am not easily able to test it on my mac.
Here are the snippets that may be effecting things. The first is starting them off the page.
.jumbotron #name {
margin-left:-200em;
}
.jumbotron #line {
margin-left:-80em;
}
.jumbotron #occupation1, .jumbotron #occupation2 {
margin-left:-190em;
}
#-webkit-keyframes slideInLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(42%, 0, 0);
transform: translate3d(42%, 0, 0);
}
}
#keyframes slideInLeft {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(42%, 0, 0);
transform: translate3d(42%, 0, 0);
}
}
#-webkit-keyframes slideInLeftLine {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(315%, 0, 0);
transform: translate3d(315%, 0, 0);
}
}
#keyframes slideInLeftLine {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(315%, 0, 0);
transform: translate3d(315%, 0, 0);
}
}
#-webkit-keyframes slideInLeft2 {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(43%, 0, 0);
transform: translate3d(43%, 0, 0);
}
}
#keyframes slideInLeft2 {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(43%, 0, 0);
transform: translate3d(43%, 0, 0);
}
}
#-webkit-keyframes slideInLeft3 {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(45%, 0, 0);
transform: translate3d(45%, 0, 0);
}
}
#keyframes slideInLeft3 {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(45%, 0, 0);
transform: translate3d(45%, 0, 0);
}
}
.slideInLeft3 {
-webkit-animation-name: slideInLeft3;
animation-name: slideInLeft3;
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
.slideInLeft2 {
-webkit-animation-name: slideInLeft2;
animation-name: slideInLeft2;
}
.slideInLeftLine {
-webkit-animation-name: slideInLeftLine;
animation-name: slideInLeftLine;
}
#name {
opacity:1;
animation: slideInLeft 2s 1;
-webkit-animation: slideInLeft 2s 1;
-moz-animation: slideInLeft 2s 1;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
#line {
opacity:1;
animation: slideInLeftLine 2s 1;
-webkit-animation: slideInLeftLine 2s 1;
-moz-animation: slideInLeftLine 2s 1;
-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
animation-delay: 2s;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
#occupation2 {
animation: slideInLeft3 2s 1;
-webkit-animation: slideInLeft3 2s 1;
-moz-animation: slideInLeft3 2s 1;
-webkit-animation-delay: 5s; /* Chrome, Safari, Opera */
animation-delay: 5s;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
#occupation1 {
animation: slideInLeft2 2s 1;
-webkit-animation: slideInLeft2 2s 1;
-moz-animation: slideInLeft2 2s 1;
-webkit-animation-delay: 3s; /* Chrome, Safari, Opera */
animation-delay: 3s;
-webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
animation-fill-mode: forwards;
}
Really just the #line is the one that I am having trouble with. It could possibly be because the margins function differently with edge and ie? I know that the resume's on the site are not displaying center in the page either. I put the site up on a sub directory incase you want to see it.
For starters one major issue is your html. You have extra anonymous closing tags i.e. extra closing div in jumbotron and a random closing p tag in col-md-4 col-md-offset-7. I just removed the col-md-4 divs altogether
I also don't know why you are using margin-left. I personally would scrap using margin left and use absolute positioning on the items inside #jumbotron and make sure #jumbotron is relatively positioned. You will have to mess with the positions to get what you want, but this works in IE.
Html:
<div class="jumbotron">
<div id="name">
<h2>Joseph Scalzo</h2>
</div>
<div id="line"></div>
<h3 id="occupation1">Performer.</h3>
<h3 id="occupation2">Sommelier.</h3>
</div>
<main role="main">
<!-- section -->
<section>
<!-- article formerly with class bigboy -->
<article id="post-2" class="post-2 page type-page status-publish hentry">
<div class="container" id="hide" style="height:0; width:0;">
<figure>
<img src="http://joebiz.net/blog/wp-content/uploads/2015/09/jumbotron.jpg" alt="headshot1"/><br />
</figure>
<div class="col-md-4 col-md-offset-7">
<h2>Joseph Scalzo</h2>
<hr id="fixedLine">
<h3>Performer. Sommelier.</h3>
</div>
</div>
<br class="clear">
</article>
<!-- /article -->
</section>
<!-- /section -->
</main>
Css:
.jumbotron {
position: relative;
}
.jumbotron h2 {
font-size:4em;
font-family: 'Raleway', Tahoma, sans-serif;
color:#f3e877;
}
.jumbotron h3 {
font-family: 'Raleway', Tahoma, sans-serif;
color:black;
}
.jumbotron #name {
position: absolute;
top: 100px;
width: 375px;
}
.jumbotron #line {
border-bottom: 1px solid #fff;
height: 1px;
position: absolute;
top: 172px;
left: -100%;
width: 375px;
}
.jumbotron #occupation1 {
position: absolute;
top: 180px;
left: -100%;
width: 375px;
}
.jumbotron #occupation2 {
position: absolute;
top: 220px;
left: -100%;
width: 375px;
}
#-webkit-keyframes slideInLeft {
from {
left: -100%;
}
to {
left: 60%;
}
}
#keyframes slideInLeft {
from {
left: -100%;
}
to {
left: 60%;
}
}
#-webkit-keyframes slideInLeftLine {
from {
left: -100%;
}
to {
left: 60%;
}
}
#keyframes slideInLeftLine {
from {
left: -100%;
}
to {
left: 60%;
}
}
#-webkit-keyframes slideInLeft2 {
from {
left: -100%;
}
to {
left: 68%;
}
}
#keyframes slideInLeft2 {
from {
left: -100%;
}
to {
left: 68%;
}
}
#-webkit-keyframes slideInLeft3 {
from {
left: -100%;
}
to {
left: 72%;
}
}
#keyframes slideInLeft3 {
from {
left: -100%;
}
to {
left: 72%;
}
}
I am trying to add this scroll animation script to my website: http://codepen.io/zutrinken/pen/yhqEA
#scrolldown {
bottom: 40px;
height: 100px;
margin-left: -50px;
position: absolute;
left: 50%;
text-align: center;
width: 100px;
z-index: 100;
}
#scrolldown p {
font: 700 0.7em/1em 'Avenir',sans-serif;
animation-duration: 2s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: scroll;
color: #000;
}
#scrolldown > p {
text-transform: uppercase;
text-indent: 3px;
}
.mouse {
border: 2px solid #000;
border-radius: 13px;
display: block;
height: 46px;
left: 50%;
margin: 10px 0 0 -13px;
position: absolute;
width: 26px;
}
.mouse span {
display: block;
font-size: 1.5em;
margin: 6px auto;
}
#keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(10px);
}
}
<div id="scrolldown">
<p>scroll</p>
<div class="mouse">
<span><p>↓</p></span>
</div>
</div>
The animation works in Chrome while in Code Pen but i can not get it to work outside of Code Pen. How Can I get this script to work with other browsers?
http://rapidevac.biz/tapreport/ This is my website that i added the script to. Like i said, it works with IE 9 but not with other browsers.
Thanks guys for reviewing my question!
Add this after your #keyframes scroll to se the animation in all browsers
#-moz-keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(10px);
}
}
#-o-keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(100px);
}
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(100px);
}
}
#keyframes scroll {
0% {
opacity: 1;
transform: translateY(0px);
}
100% {
opacity: 0;
transform: translateY(10px);
}
}
Your transitions are not cross-browser friendly.
Change your #scrolldown p css to this:
#scrolldown p {
font: 700 0.7em/1em 'Avenir',sans-serif;
animation-duration: 2s;
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: scroll;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: scroll;
-moz-animation-duration: 2s;
-moz-animation-fill-mode: both;
-moz-animation-iteration-count: infinite;
-moz-animation-name: scroll;
-o-animation-name: scroll;
-o-animation-duration: 2s;
-o-animation-fill-mode: both;
-o-animation-iteration-count: infinite;
}