Css3 animasyon

Developer
Ayhan ALTINOK
Size
3,191 Kb
Views
28,336
  1. Css3 animasyon Previews
  2. Css3 animasyon HTML Codes
  3. Css3 animasyon CSS Codes
  4. Css3 animasyon JS Codes

How do I make an css3 animasyon?

Css3 animasyon. What is a css3 animasyon? How do you make a css3 animasyon? This script and codes were developed by Ayhan ALTINOK on 13 September 2022, Tuesday.

Css3 animasyon Previews
IQ Test

Css3 animasyon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>css3 animasyon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class="ef"> <ul> <li><a href="javascript:void(0)" data-fn="home">Home</a></li> <li><a href="javascript:void(0)" data-fn="services">Services</a> </li> <li><a href="javascript:void(0)" data-fn="blog">blog</a></li> <li><a href="javascript:void(0)" data-fn="contact">Contact</a></li> <li><a href="javascript:void(0)" data-fn="photos">Photos</a></li> <li><a href="javascript:void(0)" data-fn="features">Features</a></li> <li><a href="javascript:void(0)" data-fn="portfolio">Portfolio</a></li> <li><a href="javascript:void(0)" data-fn="help">Help</a></li> <li><a href="javascript:void(0)" data-fn="other">Other</a> </li> </ul>
</nav>
<div class="box-preview"> <h1>Hello friends</h1> <p>This is simple but effective effect with jQuery and CSS3</p>
</div>
<footer class="ef"> <p>Copyright &copy; 2013 </p>
</footer>
<div class="box" data-panel="home"> <a href="javascript:void(0)" data-fn="close">X</a> <div class="box-inner"> <h1>Home</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis non laudantium nihil enim minus repellat odit laborum pariatur error sapiente aut distinctio iste eaque exercitationem voluptas esse magnam beatae similique.</p> </div>
</div>
<div class="box" data-panel="services"> <a href="javascript:void(0)" data-fn="close">X</a> <div class="box-inner"> <h1>Services</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis non laudantium nihil enim minus repellat odit laborum pariatur error sapiente aut distinctio iste eaque exercitationem voluptas esse magnam beatae similique.</p> </div>
</div>
<div class="box" data-panel="blog"> <a href="javascript:void(0)" data-fn="close">X</a> <div class="box-inner"> <h1>Blog</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis non laudantium nihil enim minus repellat odit laborum pariatur error sapiente aut distinctio iste eaque exercitationem voluptas esse magnam beatae similique.</p> </div>
</div>
<div class="box" data-panel="contact"> <a href="javascript:void(0)" data-fn="close">X</a> <div class="box-inner"> <h1>Contact</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis non laudantium nihil enim minus repellat odit laborum pariatur error sapiente aut distinctio iste eaque exercitationem voluptas esse magnam beatae similique.</p> </div>
</div>
<div class="box" data-panel="photos"> <a href="javascript:void(0)" data-fn="close">X</a> <div class="box-inner"> <h1>Photos</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis non laudantium nihil enim minus repellat odit laborum pariatur error sapiente aut distinctio iste eaque exercitationem voluptas esse magnam beatae similique.</p> </div>
</div>
<div class="box" data-panel="features"> <a href="javascript:void(0)" data-fn="close">X</a> <div class="box-inner"> <h1>Features</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis non laudantium nihil enim minus repellat odit laborum pariatur error sapiente aut distinctio iste eaque exercitationem voluptas esse magnam beatae similique.</p> </div>
</div>
<div class="box" data-panel="portfolio"> <a href="javascript:void(0)" data-fn="close">X</a> <div class="box-inner"> <h1>Portfolio</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis non laudantium nihil enim minus repellat odit laborum pariatur error sapiente aut distinctio iste eaque exercitationem voluptas esse magnam beatae similique.</p> </div>
</div>
<div class="box" data-panel="help"> <a href="javascript:void(0)" data-fn="close">X</a> <div class="box-inner"> <h1>Help</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis non laudantium nihil enim minus repellat odit laborum pariatur error sapiente aut distinctio iste eaque exercitationem voluptas esse magnam beatae similique.</p> </div>
</div>
<div class="box" data-panel="other"> <a href="javascript:void(0)" data-fn="close">X</a> <div class="box-inner"> <h1>Other</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis non laudantium nihil enim minus repellat odit laborum pariatur error sapiente aut distinctio iste eaque exercitationem voluptas esse magnam beatae similique.</p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Css3 animasyon - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lobster);
*{ margin:0; padding:0;
}
body{ padding-top:15%; background:#ecf0f1; position:relative; height:100%; overflow-x:hidden; color:#34495e; -webkit-transition:background 1s ease-in-out; -moz-transition:background 1s ease-in-out; -o-transition:background 1s ease-in-out; transition:background 1s ease-in-out;
}
nav,footer{ font-family: 'Lobster', cursive; position:fixed; left:-5px; width:115%; height:120px; background:#e74c3c; -webkit-transform:rotate(2deg); -moz-transform:rotate(2deg); -ms-transform:rotate(2deg); -o-transform:rotate(2deg); transform:rotate(2deg);
}
nav{ top:-45px;
}
footer{ bottom:-45px;
}
nav ul{ list-style:none; text-align:center; display:block; padding:5px; line-height:150px; -webkit-transform:rotate(-2deg); -moz-transform:rotate(-2deg); -ms-transform:rotate(-2deg); -o-transform:rotate(-2deg); transform:rotate(-2deg); margin-left:-15%;
}
nav ul li{ display:inline-block;
}
nav a{ text-decoration:none; margin:0 auto; color:#ecf0f1; padding:8px 12px; -webkit-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; transition:all 1s ease-in-out;
}
nav a:hover,active{ color:#34495e; background:white; -webkit-transition:all 1s ease-in-out; -moz-transition:all 1s ease-in-out; -o-transition:all 1s ease-in-out; transition:all 1s ease-in-out;
}
.box-preview{ margin:10px; padding:5px; width:100%; text-align:center;
}
footer p{ text-align:center; display:block; padding:5px; line-height:50px; -webkit-transform:rotate(-2deg); -moz-transform:rotate(-2deg); -ms-transform:rotate(-2deg); -o-transform:rotate(-2deg); transform:rotate(-2deg); margin-left:-15%; color:#ecf0f1;
}
a[data-fn="close"]{ float:right; color:#ecf0f1; background:#e74c3c; padding:5px 10px; margin:0; text-decoration:none;
}
.box{ position:fixed; top:0; background:#ecf0f1; color:#34495e; margin:10px; padding:20px;
}
/* Animation
---------------------------*/
.ef{ -webkit-animation: move 1s 1 ease-in-out; -moz-animation: move 1s 1 ease-in-out; -o-animation: move 1s 1 ease-in-out; animation: move 1s 1 ease-in-out;
}
@-webkit-keyframes move{50%{height:80%;}}
@-moz-keyframes move{50%{height:80%;}}
@-o-keyframes move{50%{height:80%;}}
@-ms-keyframes move{50%{height:80%;}}
@keyframes move{50%{height:80%;}}

Css3 animasyon - Script Codes JS Codes

// postion left
$('.box').css({left:$(window).width()});
// if resize
$(window).resize(function(){ $('.box').css({left:$(window).width()}); $('nav').slideDown(500);
});
// data-fn
$.js = function(el){ return $('[data-fn="'+el+'"]');
};
// sections
var sections =[ 'home','blog','services','contact','photos', 'features','portfolio','help','other'
];
// get function to pass jshint error
var getFn = function(el){ $.js(el).on('click',function(){ $('nav,footer').animate({height:'80%'},800); $('[data-panel="'+$(this).data('fn')+'"]').css({ width: $(window).width() - 65, height:$(window).height() - 65}).animate({ top:0,left:0},300); });
};
// loop function
for (var i = 0; i < sections.length; i++) { getFn(sections[i]);
}
// Close panel
$.js('close').on('click',function(){ $('nav,footer').slideDown(500); $('nav,footer').animate({height:'120px'},800); $(this).parent().animate({ left:-($(window).width()+50) },500,function(){ $('.box').css({left:$(window).width()}); });
});
Css3 animasyon - Script Codes
Css3 animasyon - Script Codes
Home Page Home
Developer Ayhan ALTINOK
Username AyhanALTINOK
Uploaded September 13, 2022
Rating 3
Size 3,191 Kb
Views 28,336
Do you need developer help for Css3 animasyon?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ayhan ALTINOK (AyhanALTINOK) Script Codes
Name
Galeri efekti
A Pen by Ayhan ALTINOK
Css galeri
Akordion slayt -acordion slide
Facebook Responsive Lightbox
Menu
Css sallanan resim efekti
Slider
Filtre ile Arama Kutusu - Search Box with Filter
Jquery Fare Animasyonu - Jquery Mouse Animation
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!