css3 and js animation in kentico

Kentico does work with CSS3 and Javascript, but in order for us to be able to help you we would need more details. In particular where you upload the CSS3 and Javascript and how is it being referenced in the page.

You may also want to look at the tutorial https://docs.kentico.com/k11tutorial/portal-engine-development/adding-styles-to-the-website

1-first i upload my css3 files then i include them in master page 2 -i include javascript animation files but they dont work in good way in browser does kentico generate own style so there is conflict Image css , javascript

Kentico does add some class names to the output depending on the modules you are using, so this could be causing a problem. However, I would start by comparing the code that is output on the page against that in the template you are working from.

The screenshots of the javascript includes shows a 'home.js' file and I would guess that this file is looking for some specific class names in the output to apply the effects. In particular I would pay attention to the Body tag which does have several class names added by Kentico and your script may be looking for a specific class which is not getting included.

Unfortunately without seeing the code of home.js and the html generated by Kentico it is going to be hard to help you much further. If possible see if you can put it on a demo site and give us a link to have a look.

I noticed you had a live URL in the screenshot you provided so visited that site and had a quick look. The first thing I noticed is that the home.js file references elements in the HTML via the ID.

eg:

if($('#section5').hasClass('active')==true) {

This is not recommended when working with Kentico and for that matter any web forms app since the ID's are normally generated on the server to avoid conflicts. Instead you should look at using a specific class to target that element instead.

eg:

In the HTML code you the live site has:

<div class="section direstion-intor" id="section5">

You could modify this element to :

<div class="section directions-section direstion-intor">

Then in the home.js file you can replace "#section5" with ".directions-section"

Note: that the home.js file has lots of selectors based on ID and hence you would need to spend a fair amount of time figuring out the best way to structure these as classes. As this is mostly for animation, you should also look at how Kentico will be used for Content Management and hence how the links are being generated on the home page so you can structure the animations such that they are reusable and can be assigned to any section.